JavaScript & jQuery & CSS & HTML の達人

JavaScript と jQuery と CSS と HTML の使い方がわかるブログ

CSSで角を丸める方法

角を丸める

要素の角を丸めるにはCSSで「border-radius」を設定します。

例) border-radius : 20px;

SAMPLE

CSSで「border-radius : 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; ※丸めるサイズを1つだけ指定すると四隅を均等になる

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

終わり