CSS の border-radius で特定の箇所を丸める

更新2024/04/12

border-radius は要素の角を丸めたいときに使用するCSSプロパティです。以下のような書き方で4つの角を全て丸めることができます。

border-radius: 10px;

全ての角ではなく、一部の角だけ丸めたい場合は値を分ければOK。

border-radius: 10px 0 0 0;

4つの数値を指定すれば「左上・右上・右下・左下」、2つの数値の場合は「左上と右下・右上と左下」の角に適用されます。

border-radius は全ての角をまとめて指定するプロパティですが、一つ一つの角ごとで設定するプロパティもあります。

左上
border-top-left-radius: ; 
右上
border-top-right-radius: ;
右下
border-bottom-right-radius: ;
左下
border-bottom-left-radius: ;

【コード例】

.sample_border_radius_box {
  display: block;
  width: 100px;
  height: 100px;
  background: #118c99;
  margin-top: 20px;
}
.sample_border_radius_box.box01 {
  border-radius: 30px 0 0 0;
}
.sample_border_radius_box.box02 {
  border-radius: 0 30px;
}
.sample_border_radius_box.box03 {
  border-bottom-right-radius: 30px;
}

サンプルコードを実装

左上だけを角丸(box01)

右上と左下を角丸(box02)

右下だけを角丸(box03)

【参照】border-radius – CSS: Cascading Style Sheets | MDN

カテゴリー : HTML-CSS

HTML-CSS関連の記事