【CSS】border-radiusで上だけ丸くする方法

「border-radius」は、CSSのボーダーの角を丸くするためのプロパティです。特定の方向だけ丸くするには、それぞれの値を指定します。

.example {
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}

上辺だけを丸くするために、上辺の左右両側に「border-top-left-radius」「border-top-right-radius」を指定します。

もし、全ての角を丸くする場合は、「border-radius」プロパティを使用します。

.example {
  border-radius: 30px;
}

上下左右の値を指定することで、特定の方向だけ丸くすることも可能です。

.example {
  border-top-left-radius: 0;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 0;
}

角を丸くすることで見た目を美しくなり、デザイン性を高めることができます。