リストの上及び下の枠線の角を丸める

疑似クラス「:first-child」及び「:last-child」を用いてリスの最上部と最下部の枠線を「border-radius」で指定することのより角を丸めることが出来ます。

THML

<ul>
<li>第1項目</li>
<li>第2項目</li>
<li>第3項目</li>
<li>第4項目</li>
<li>第5項目</li>
</ul>

CSS

li { border: 1px solid blue; margin-bottom: 1px; }

CSSに「:first-child」及び「:last-child」を加えて次のようにする

li {
   border: 1px solid blue; margin-bottom: 1px;
  }
li:first-child {
  border-radius: 12px 12px 0px 0px;
  }
li:last-child {
    border-radius: 0px 0px 12px 12px; ;
   }

  • 第1項目
  • 第2項目
  • 第3項目
  • 第4項目
  • 第5項目
  • 第1項目
  • 第2項目
  • 第3項目
  • 第4項目
  • 第5項目

戻る