要素の四隅を丸めるborder-radiusについて解説

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

radius は日本語に翻訳すると「半径」という意味になります。

border-radius を指定した時は下記のようになります。

border-radius は上記の赤い円の半径を指定することで四隅を丸めます。

border-radius で使用できる主な単位は px、％ の2つです。

また、border-radius の指定方法は下記の4つです。

border-radius を px で指定したときは固定になるので要素幅を変更しても四隅の丸まりは変わりません。

それでは、border-radius を px で指定したときの表示を確認していきましょう。

<div class="border-radius-px-01"></div>

<div class="border-radius-px-02"></div>

<div class="border-radius-px-03"></div>

<div class="border-radius-px-04"></div>

div {
　width: 95%;
　height: 200px;
　border: 5px solid #ff0000;
　background-color: rgba($color: #ff0000, $alpha: 0.3);
}

.border-radius-px-01 {
　/* 全方向に同じpxを指定 */ 
　border-radius: 50px;
}

.border-radius-px-02 {
　/* border-radius: 左上と右下 右上と左下; */
　border-radius: 50px 100px;
}

.border-radius-px-03 {
　/* border-radius: 左上 右上と左下 右下; */
　border-radius: 50px 100px 200px;
}

.border-radius-px-04 {
　/* 全方向に個別でpxを指定 */
　border-radius: 50px 100px 150px 200px;
}

今回は border-radius: 50px; を指定したので、全方向に50pxの border-radius が設定されました。

今回は border-radius: 50px 100px; を指定したので、左上と右下は50px、右上と左下は100pxの border-radius が設定されました。

今回は border-radius: 50px 100px 200px; を指定したので、左上は50px、右上と左下は100px、右下は200pxの border-radius が設定されました。

今回は border-radius: 50px 100px 150px 200px; を指定したので、左上は50px、右上は100px、右下は150px、左下の200pxの border-radius が設定されました。

ここでは border-radius を px で指定したときの表示を確認しました。

border-radius を px で指定したときは固定になるので要素幅を変更しても四隅の丸まりが変わらないことを確認してみてください。

border-radius を % で指定したときは可変になるので要素幅を変更したら四隅の丸まりも変わります。

それでは、border-radius を % で指定したときの表示を確認していきましょう。

<div class="border-radius-percent"></div>

.border-radius-percent {
　width: 95%;
　height: 20vh;
　border: 5px solid #ff0000;
　border-radius: 25%;
　background-color: rgba($color: #ff0000, $alpha: 0.3);
}

今回は border-radius: 25%; を指定したので、全方向に25%の border-radius が設定されました。

また、% で指定したときは可変になるので要素幅を変更したら四隅の丸まりが変わることを確認してみてください。

この記事では border-radius について解説しました。

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

使用できる主な単位はpx、％ の2つで、指定方法は4つあるので状況に合わせて使い分けていきましょう。

最後までお読みいただきありがとうございます。