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

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

border-radiusプロパティに4つの値を指定
border-top-left-radiusとborder-top-right-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プロパティを指定する場合、値を同じにすると、要素の角が四角形状の角丸になります。