[CSS] 角を丸くする

四隅の角を丸くする

divタグや pタグで作った枠の角を丸くするには「border-radius」を使います。

値はピクセル（px）指定またはパーセント（%）指定が可能です。
また、値を２つ指定することで丸みの縦と横の比率を変えることができます。
　（下記「丸みの比率を指定する」参照）

例）角を10pxのサイズで丸くする。

divタグやh1、h2タグなどでも同じように角を丸くすることができます。

【結果】

角を丸くしてみました。

値を変えたサンプル

border-radius:1px;

border-radius:2px;

border-radius:3px;

border-radius:5px;

border-radius:8px;

border-radius:10px;

border-radius:15px;

border-radius:30%;

border-radius:50%;

パーセント指定だと、ボックスのwidth・heightサイズの割合で角を丸くします。

指定した角を丸くする

左上、右上、左下、右下を個別に指定することもできます。

例）左上のみ10pxサイズで丸くする

【結果】

左上のみ角を丸くしてみました。

丸みの比率を指定する

値を２つ指定することで、丸みの比率を変えて楕円にすることもできます。

例）横100px、縦20pxサイズで左上のみ丸くする

【結果】

左上を横100px、縦20pxサイズで丸くしてみました。