【CSS】要素の枠の角を丸める方法

CSSで要素の枠の角を丸める

デフォルトでは要素の枠の角はとがっていますが、CSS を利用すれば枠の角を自由に丸めることができます。

CSS の border-radius で角を丸める

要素の枠の角を丸めるにはCSSで「border-radius」を設定します。角の弧の大きさを半径で指定します。

例） border-radius : 20px;

サンプル

CSSで「border-radius : 20px;」に設定すると枠の四隅が丸くなりました。この場合の丸める弧の大きさは 20px です。 

箱

HTML ソース 

<div class="box">箱</div>

CSS コード

角を丸めたい要素のCSSに「border-radius : 20px;」を追加するだけです。

.box {
     height: 100px;
     width: 100px;
     background-color: #F33;
     text-align: center;
     font-weight: bold;
     color: #FFF;
     display: table-cell;
     vertical-align: middle;
     font-size: 36px;
     border-radius: 20px;
}

備考・その他

border-radius:20px;　※丸めるサイズを１つだけ指定すると四隅が均等になります。

border-radius:5px 10px 15px 20px;　※四隅の丸めるサイズをそれぞれ個別に指定することもできます。

END