KuzLog

KuzLog
2018/01/06 2018/01/13 Web制作

【CSS】border-radiusの使い方を詳しく解説してみる

使用頻度がめちゃくちゃ高いプロパティですが、「とりあえずborder-radius: 4px;付けとけば、角がなんか良い感じになる」みたいなノリで使っている人もいるかもしれないので、解説記事を作っときました。

border-radiusってなに?

border-radiusとは、要素の角(輪郭)を丸めるプロパティです。正しく使えば、Webサイト上の色々な場所をそれっぽい雰囲気にすることが出来ます。

border-radiusに指定できる値

border-radiusには数値を指定します。単位はpxでも%でも何でもOKです。

適当なサンプル

See the Pen KZyNYx by Kuzlog (@Kuzlog) on CodePen.

border-radiusに20pxを指定すると、こんな感じになります。

次に、border-radiusの仕組みを見てみましょう。

border-radiusの仕組み

このように、border-radiusに指定した値を半径とした円に沿って、角が丸められます。

角ごとに丸みを変える

See the Pen dJZNbX by Kuzlog (@Kuzlog) on CodePen.

このように個別に指定することも可能ですが、一括で指定することも可能です。

左上から時計回りって覚えましょう。

水平・垂直方向の丸みを変える

See the Pen XVzprL by Kuzlog (@Kuzlog) on CodePen.

このように、スラッシュ(/)を使えば水平・垂直方向の半径に別の値を指定することが可能です。
一応画像の解説も付けときます。

円の作り方

See the Pen ypPgNZ by Kuzlog (@Kuzlog) on CodePen.

border-radius: 50%;を指定すると、全ての角が滑らかに丸まります。サンプルは縦横150pxなので、全ての角に半径75px(50%)の正円がくっついてる=まんまるになるってイメージです。

ブラウザの対応状況

記事執筆時点(2018/1/6)で、ほぼ全てのブラウザがborder-radiusプロパティに対応しています。IE8は非対応みたいですが、今時IE8を使っている人なんてほぼいないし、いたとしても角が丸かろうが直角だろうが問題は無いはずなので、ベンダープレフィックス無しでガンガン使ってOKです。


ぶっちゃけ仕組みが分からなくても適当に数値をいじるだけで使えるプロパティなんですが、仕組みを知っておけば複雑な形を作りたくなった時に便利かも?

おやすみなさい。