cssで角だけが丸い枠組みがうまく作れません。

Question

このような枠付きのリストを作りたいのですが、うまく行きませんでした。
・角だけを丸くしたいがradiusを入れると全部が丸くなってしまう
・各県の間の枠線が重なっていて太くなってしまっている
このような問題につまづいております。

よければどのようにCSSを記述するとうまく行くかを解説お願いします。
下記は自分で書いたコードです。

<div class="pa-top-area-map">
        <img class="japanMap" src="img/japanMap.png">
        <ul class="map-area kyushu">
          <li><a href="#">福岡</a></li>
          <li><a href="#">佐賀</a></li>
          <li><a href="#">長崎</a></li>
          <li><a href="#">大分</a></li>
          <li><a href="#">熊本</a></li>
          <li><a href="#">宮崎</a></li>
          <li><a href="#">鹿児島</a></li>
        </ul>
      </div>

.mv-right {
  width:50%;
  padding:20px;
}
.japanMap {
  height: 400px;
  padding-top:30px;
}

.map-area li {
  list-style:none;
  border:2px solid #ccc;
  padding:2px;
  width:66px;
  height:28px;
  font-size:14px;
  font-weight: 700;
  /* text-align:center;
  line-height: 28px; */
  overflow:hidden;
  background-color:yellow;
  display: flex;
  justify-content: center;
}

【追加の質問】

<ul class="map-area shikoku multi">
          <li>愛媛</li>
          <li>高知</li>
          <li>香川</li>
          <li>徳島</li>
</ul>

.map-area.multi {
  display:flex;
  width:120px;
  flex-wrap:wrap;
}
.map-area.multi li:nth-child(odd){
  border-right:2px solid black;
}
.map-area.multi li:nth-child(-n+2){
  border-top: none;
}

このようなHTMLを追加して下記のような枠を作ろうと思ったのですが、
枠が二重になってしまったり、変な隙間が出来てしまったりとうまく出来ませんでした。
こちらの解説もお願いします。

Answer 1

HTML - HTMLで余白が出来てしまいます。｜teratail
の続きですよね。回答書いて投稿したら、すでに解決済みになってました。
なぜ、中途半端な状態で解決済みにしたのか。
今回の質問も、前回の内容を踏まえてでないと回答できません。
前回の回答も無視されてますし。

とりあえす、前回の質問を踏まえると、下記のような感じでしょうか。

CSSのリセットを追加。（コード中の全角空白はNGですよ。）

li は border-bottom で下辺だけ境界線を表示。
最後の下線は、:last-child疑似要素で消す。

全体の枠は親要素(.map-area)につける。
角丸は border-radius で。
ただし、overflow: hidden; がないと角丸にならない。

/* CSSのリセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
}

.map-area {
  box-sizing: border-box;
  width: 66px;
  border:2px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
}
.map-area li {
  list-style:none;
  border-bottom: 2px solid #ccc;
  padding:2px;
  width:66px;
  height:28px;
  font-size:14px;
  font-weight: 700;
  /* text-align:center;
  line-height: 28px; */
  overflow:hidden;
  background-color:yellow;
  display: flex;
  justify-content: center;
}

.map-area li:last-child {
    border-bottom: none;
}

/* 以下2列(.multi)の場合 */
.map-area.multi {
  display: flex;
  width: 136px;
  flex-wrap: wrap;
}
.map-area.multi li:nth-child(odd){
  border-right:2px solid #ccc;
}
.map-area.multi li:nth-last-child(2){
  border-bottom: none;
}

Comments

[takawork]

失礼しました、ベストアンサーを押し間違えてしまいました。
頂いたコードで理想とする枠が出来ました。ありがとうございます。
コードで理解出来ない部分があるのですが、なぜlast-childの下線部を消すだけでfirst-childの上線部も丸くなったのでしょうか？
感覚的には
```
.map-area li:first-child {
border-top: none;
}
```
が必要な気がしました。

[takawork]

あと
福岡佐賀
長崎大分
など2列にする場合はどうすれば良いですか？

[takawork]

HTMLは追加でこんな感じにしてみました。
<ul class="map-area shikoku multi">
<li>愛媛</li>
<li>高知</li>
<li>香川</li>
<li>徳島</li>
</ul>

[takawork]

見辛いので質問の下に画像付きで質問を追加したので、そちらの回答も是非hatenaさんに解説頂ければと思います。よろしくお願いします。

[hatena19]

回答のコードに追加しましたので参考にしてください。

Answer 2

単純に縦並びであれば

/* reset */
* {box-sizing: border-box; margin: 0; padding: 0; }

/* 以下、リスト部分 */
.map-area {
  list-style:none;
  background-color:yellow;
  border:2px solid #ccc;
  width:66px;
  border-radius: 10px; /* 角丸はお好みのサイズに */
}
.map-area li {
  border-bottom: 2px solid #ccc;
  font-size:14px;
  font-weight: 700;
  line-height: 28px;
  padding:2px;
  text-align:center;
}
.map-area li:last-child {
  border-bottom: 0; /* 一番最後の下borderだけ消す */
}

display: flex; などで複雑にしなくても
ul に設定を入れてしまえばシンプルにいけると思います^^

プロパティを複雑にすると
cssが膨大になりやすいですし
後々のメンテナンスが面倒になりやすいです^^;;
他の要素に使い回すなどの理由が無ければ
極力シンプルなスタイルをお勧めしますm(__)m