HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

応用50. 要素の角を丸くするプロパティ(border-radius)

      2018/10/24   hatano

border-radiusプロパティ(ボーダーレイディアス)

指定した要素(ボックス)の角を半径を指定して丸めます。単位は、主にpxまたは%を使用します。
CSS3で追加されたプロパティです。
ベンダープレフィックスは不要
※Internet Explorer 9以上から対応

border-radiusプロパティの各ブラウザの対応状況
Can I use -border-radius-

border-radiusプロパティ

角丸の個別指定1

値を4つ指定することで、4つの角を個別で指定できます。
値は、左上、右上、右下、左下の順番に指定します。
各値は、半角スペースで区切ります。

border-radiusで4つの角丸を指定

角丸の個別指定2

値を / で区切ると「水平の半径 / 垂直の半径」で丸めることができます。

border-radiusで水平、垂直の半径で指定

また、水平、垂直の半径は、各角ごとに指定することもできます。先ほどのコードは、下記のように書くこともできます。

8つの値を指定するのは直感的に難しいと思います。下記のサイトは、直感的な操作が可能なborder-radiusのジェネレーターです。

タブを作る

左上と右上のみ角丸を指定することで、タブをつくることができます。
左下と右下は、0pxで指定します。

border-radiusでタブを表現する

正円を作る

幅と高さの半分の値で角丸を指定すると正円を作ることができます。

border-radiusで正円を作る

楕円を作る

幅の半分の値を水平の半径、高さの半分の値を垂直の半径で指定すると楕円を作ることができます。

border-radiusで楕円を作る

まとめ

  • border-radiusは、要素の角を丸めることができる
  • 各角ごとの指定は、左上、右上、右下、左下の順番に指定する
  • 水平の半径、垂直の半径は、/ で区切って指定する

広告

 - HTML・CSS