【CSS】border-radiusで要素の上だけを角丸にする方法

CSSのborder-radiusプロパティは、要素の角を丸めることができます。このプロパティを使って、要素の上だけを角丸にするには、以下の方法があります。

border-radiusプロパティに4つの値を指定

border-radiusプロパティには、4つの値を指定することで、要素の四隅の角を丸めることができます。このとき、最初の2つの値が左上の角の丸み、3つ目と4つ目の値が右下の角の丸みを表します。そのため、最初の2つの値だけに値を指定すると、左上と右上の角だけを角丸にすることができます。

.box {
  border-radius: 20px 20px 0 0;
}

border-top-left-radiusとborder-top-right-radiusプロパティを指定

border-top-left-radiusプロパティとborder-top-right-radiusプロパティを指定することで、要素の上だけを角丸にすることもできます。

.box {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

まとめ

どちらの方法でも、要素の上だけを角丸にすることができます。ただし、border-radiusプロパティに4つの値を指定する場合、最初の2つの値を同じ値にすると、要素の角が完全に丸くなります。一方、border-top-left-radiusプロパティとborder-top-right-radiusプロパティを指定する場合、値を同じにすると、要素の角が四角形状の角丸になります。

応用例

要素の上だけを角丸にすることで、以下のことができます。

• ボタンやタブなどの要素をより視覚的に強調する
• 画像やテキストをより優雅に見せかける
• 要素の角を滑らかにして、視認性を向上させる