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%;のように負の数を指定しても無効です。MDN対応ブラウザ2022年4月23日現在では、ほぼ全てのブラウザで問題なく使用可能です。border-radius値の指定方法border-radiusには、複数の値の指定方法があります。値を半角空白で区切ったり、スラッシュで区切って指定できます。半角空白とスラッシュ両方使って区切ると、最大8つの値を指定できます。スラッシュで区切ると、スラッシュの前の値は水平方向の長さを、スラッシュの後の値は垂直方向の長さを指定できます。文字だけでは分かりづらいかもしれないので、以下より詳しく書いていきます。説明では、pxのみ使っていますがvwや%なども指定可能です。%で指定の場合、少し注意が必要です。値を一つだけ指定border-radius:30px;上記のように指定すると、要素の四隅すべてに30pxの角丸ができます。50px;上記のように指定すると、「左上・右下に100px」、「右上・左下に50px」の角丸ができます。50px;上記のように指定すると、「左上に75px」、「右上・左下に100px」、「右下に50px」の角丸ができます。上記のように指定すると、「左上に150px」、「右上に50px」、「右下に75px」、「左下に50px」の角丸ができます。75px;上記のように指定すると、要素の四隅すべての「水平方向に150px」、「垂直方向に75px」の角丸ができます。上記のように指定すると、「左上・右下の水平方向に150px、垂直方向に100px」、「右上・左下の水平方向に75px、垂直方向に50px」の角丸ができます。75px;上記のように指定すると、「左上の水平方向に150px、垂直方向に125px」、「右上・左下の水平方向に75px、垂直方向に50px」、「右下の水平方向に100px、垂直方向に50px」の角丸ができます。上記のように指定すると、「左上の水平方向に150px、垂直方向に50px」、「右上の水平方向に125px、垂直方向に100px」、「右下の水平方向に100px、垂直方向に75xp」、「左下の水平方向に75px、垂直方向に150px」の角丸ができます。指定できる値の最大値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%;指定した場合、以下の画像のようになります↓border-radius:30%;を設定pxやemなどのlength値と%のpercentage値では表示結果が異なる可能性があるので注意が必要です。ブラウザ別のバグブラウザ別で何かバグがないか調べてみると、Safariでborder-radiusが効かないことがあるそうです。解決策は、z-indexにauto以外を指定するか、will-changeにtransformを指定すると良いらしいです。overflow:hiddenを指定した、角丸マスクが効かなくてハマった話Safariでborder-radiusがhoverアニメーション中に効かない時の対処まとめborder-radiusについて知った気でいましたが、値の指定方法がたくさんあるなんで知りませんでした。他にも普段使っているだけで雰囲気で利用しているプロパティも多そうなので時間があれば調べます。