【CSS】意外と知らなかったborder-radiusについて

2022年4月22日2023年4月28日

URLをコピーしました！

普段何気なく使ってるborder-radiusについて調べてみました！

意外と知らないことが多かったので学んだことをまとめていきます。

border-radiusとは？

border-radiusとは、要素の四隅の角を丸くできるプロパティです。

border-top-left-radius→左上の角を丸くする。
border-top-right-radius→右上の角を丸くする。
border-bottom-right-radius→右下の角を丸くする。
border-bottom-left-radius→左下の角を丸くする。

上記4つのプロパティを一括で指定できます。

使用できる単位

pxやem、rem、vw、vhなどのlength値または%のpercentage値が使用できます。
また、revertやinheritなどのグローバル値も使用できます。

注意点として、border-radius:-50px;やborder-radius:-50%;のように負の数を指定しても無効です。

length値の解説はこちら→ <length> – CSS: カスケーディングスタイルシート | MDN

percentage値の解説はこちら→ <percentage> – CSS: カスケーディングスタイルシート | MDN

対応ブラウザ

2022年4月23日現在では、ほぼ全てのブラウザで問題なく使用可能です。

対応ブラウザの確認はこちら→ Can I Use | border-radius

値の指定方法

border-radiusには、複数の値の指定方法があります。

値を半角空白で区切ったり、スラッシュで区切って指定できます。
半角空白とスラッシュ両方使って区切ると、最大8つの値を指定できます。

スラッシュで区切ると、スラッシュの前の値は水平方向の長さを、スラッシュの後の値は垂直方向の長さを指定できます。

文字だけでは分かりづらいかもしれないので、以下より詳しく書いていきます。

説明では、pxのみ使っていますがvwや%なども指定可能です。
%で指定の場合、少し注意が必要です。

値を一つだけ指定

border-radius:30px;

上記のように指定すると、要素の四隅すべてに30pxの角丸ができます。

border-radius:30px;の解説画像 — border-radius:30px;を設定

値を半角空白区切りで2つ指定

border-radius:100px 50px;

上記のように指定すると、「左上・右下に100px」、「右上・左下に50px」の角丸ができます。

値を半角空白区切りで3つ指定

border-radius:75px 100px 50px;

上記のように指定すると、「左上に75px」、「右上・左下に100px」、「右下に50px」の角丸ができます。

boder-radius:75px 100px 50px;の解説画像 — border-radius:75px 100px 50px;を設定

値を半角空白区切りで4つ指定

border-radius:150px 100px 75px 50px;

border-radius:150px 100px 75px 50px;の解説画像; — border-radius:150px 100px 75px 50px;を設定

上記のように指定すると、「左上に150px」、「右上に50px」、「右下に75px」、「左下に50px」の角丸ができます。

値をスラッシュ区切りで1つずつ指定

border-radius:150px / 75px;

上記のように指定すると、要素の四隅すべての「水平方向に150px」、「垂直方向に75px」の角丸ができます。

border-radius:150px / 75px;の解説画像 — border-radius:150px / 75px;を設定

値をスラッシュ区切りで2つずつ指定

border-radius:150px 75px / 100px 50px;

border-radius:150px 75px / 100px 50px;の解説画像 — border-radius:150px 75px / 100px 50px;を設定

上記のように指定すると、「左上・右下の水平方向に150px、垂直方向に100px」、「右上・左下の水平方向に75px、垂直方向に50px」の角丸ができます。

値をスラッシュ区切りで3つずつ指定

border-radius:150px 75px 100px / 125px 50px 75px;

上記のように指定すると、「左上の水平方向に150px、垂直方向に125px」、「右上・左下の水平方向に75px、垂直方向に50px」、「右下の水平方向に100px、垂直方向に50px」の角丸ができます。

border-radius150px 75px 100px / 125px 50px 75px:の解説画像 — border-radius:150px 75px 100px / 125px 50px 75px;を設定

値をスラッシュ区切りで4つずつ指定

border-radius:150px 125px 100px 75px / 50px 100px 75px 150px;

border-radius:150px 125px 100px 75px / 50px 100px 75px 150pxの解説画像 — border-radius:150px 125px 100px 75px / 50px 100px 75px 150pxを設定

上記のように指定すると、「左上の水平方向に150px、垂直方向に50px」、「右上の水平方向に125px、垂直方向に100px」、「右下の水平方向に100px、垂直方向に75xp」、「左下の水平方向に75px、垂直方向に150px」の角丸ができます。

その他補足や注意点

border-radiusの注意点を紹介します↓

指定できる値の最大値

border-radiusに指定できる値の最大値は、指定する要素自身の幅または高さの半分までです！

例えば、幅と高さの両方300px正方形の場合、最大値は150pxです。それ以上大きい値9999pxとか指定しても150px指定した場合と同じ結果になります。

また、幅が300pxで高さが150pxの長方形の場合、水平方向の最大値は150px、垂直方向の最大値は75pxになります。

%指定時の注意点

値の指定方法では、border-radius:30px;のようにlength値で指定すると要素の四隅全ての水平・垂直方向ともに30pxの角丸ができると説明してきました。

これを、border-radius:30%;のようにpercentage値で指定すると、水平方向に要素の幅の30%、垂直方向に要素の高さの30%の角丸ができます。

「幅:600px、高さ:300px」要素にborder-radius:30%;指定した場合、以下の画像のようになります↓

幅600px、高さ300pxの要素にborder-radius:30%;を指定した場合の解説画像 — border-radius:30%;を設定

pxやemなどのlength値と％のpercentage値では表示結果が異なる可能性があるので注意が必要です。

ブラウザ別のバグ

ブラウザ別で何かバグがないか調べてみると、Safariでborder-radiusが効かないことがあるそうです。

解決策は、z-indexにauto以外を指定するか、will-changeにtransformを指定すると良いらしいです。

まとめ

border-radiusについて知った気でいましたが、値の指定方法がたくさんあるなんで知りませんでした。

他にも普段使っているだけで雰囲気で利用しているプロパティも多そうなので時間があれば調べます。

最後まで読んでいただきありがとうございました！

参考サイト

参考にさせて頂いたサイト一覧↓

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！