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;
}
上だけ角丸
よくある質問（FAQ）
Q. CSSのborder-radiusで角を丸くするには？
A. border-radius: 8pxですべての角を一括設定できます。border-radius: 8px 0 0 8px;のように4隅を個別指定（左上・右上・右下・左下の順）することもできます。
Q. border-radiusで完全な円形にするには？
A. border-radius: 50%を設定します。正方形の要素に適用すると円、長方形に適用すると楕円になります。
Q. border-radiusのパーセント指定とpx指定の違いは？
A. パーセント指定は要素のサイズに相対的に適用されます。50%が楕円・円に対応します。px指定は要素サイズに関係なく固定の半径です。小さな角丸にはpx、円形化にはパーセントが向いています。
まとめ
どちらの方法でも、要素の上だけを角丸にすることができます。ただし、border-radiusプロパティに4つの値を指定する場合、最初の2つの値を同じ値にすると、要素の角が完全に丸くなります。一方、border-top-left-radiusプロパティとborder-top-right-radiusプロパティを指定する場合、値を同じにすると、要素の角が四角形状の角丸になります。
応用例
要素の上だけを角丸にすることで、以下のことができます。
- ボタンやタブなどの要素をより視覚的に強調する
- 画像やテキストをより優雅に見せかける
- 要素の角を滑らかにして、視認性を向上させる
