CSSのborder-radiusプロパティを用いて上だけを丸くする方法

2025.04.20

CSS

このページでは、CSSのborder-radiusプロパティを用いて上だけを丸くする方法について説明していきます。

Contents

1 border-radiusプロパティとは
2 まとめ
3 こちらの記事もおすすめ

border-radiusプロパティとは

border-radiusプロパティとは、HTML要素の四隅の角の半径を一括指定するプロパティで、左上・右上・右下・左下の順で指定します。

構文

要素 {
　border-radius: 右上 右上 右下 左下;
}

使用例

HTML

<p class="border-radius--only-top">border-radius（上だけ）</p>

CSS

.border-radius {
  font-size: 50px;
  width: fit-content;
  padding: 10px;
  border: solid 2px black;
　margin: 20px;
}
.border-radius--only-top {
  border-radius: 10px 10px 0 0;
}

実行結果

See the Pen Untitled by Yagi-System (@ihspycal-the-lessful) on CodePen.

まとめ

このように、border-radiusプロパティの最初の２つを指定して、後の２つを0にすることで、上だけを丸くすることができます。

こちらの記事もおすすめ

CSSのborder-bottomプロパティで作成した下線の位置を設定する方法

CSSのborder-bottom-left-radiusを用いて左下の半径を設定する方法

CSSのborder-bottom-widthプロパティを用いて下線の太さを設定する方法

CSSのborder-bottom-styleプロパティを用いて下線のスタイルを設定する方法

CSSでborder-bottom-colorプロパティを用いて色の設定をする方法