CSS3スタイル虎の巻

border-radius

border-radiusは、枠線の角丸を指定するスタイルです。

解説

４隅の丸みの水平方向サイズと垂直方向サイズをそれぞれ指定できます。

値2～値8は省略可です。
値5～値8をすべて省略する場合は間の「/」も不要です。

構文

構文は以下になります。

border-radius: 値1 値2 値3 値4 / 値5 値6 値7 値8

値

border-radiusには以下の構文で値を指定します。

【border-radiusの値】
値	説明
値1	左上の水平方向のサイズ
値2	右上の水平方向のサイズ ※省略時は値1(左上)と同じ値
値3	右下の水平方向のサイズ ※省略時は値1(左上)と同じ値
値4	左下の水平方向のサイズ ※省略時は値2(右上)と同じ値
値5	左上の垂直方向のサイズ
値6	右上の垂直方向のサイズ ※省略時は値5(左上)と同じ値
値7	右下の垂直方向のサイズ ※省略時は値5(左上)と同じ値
値8	左下の垂直方向のサイズ ※省略時は値6(右上)と同じ値

border-radiusの初期値は0です。

サンプル

4隅を半径10pxサイズの曲線にする


.sample01 {
  border-radius:10px;
  border:1px solid #808080;
}


<div class="sample01">10px</div>

10px

左上10px 右上20px 右下30px 左下40pxの半径サイズの曲線にする


.sample01 {
  border-radius:10px 20px 30px 40px;
  border:1px solid #808080;
}


<div class="sample01">10px 20px 30px 40px</div>

10px 20px 30px 40px

水平方向（左上10px 右上20px 右下30px 左下40px）垂直方向（左上15px 右上25px 右下35px 左下45px）の曲線にする


.sample01 {
  border-radius:10px 20px 30px 40px / 15px 25px 35px 45px;
  border:1px solid #808080;
}


<div class="sample01">10px 20px 30px 40px / 15px 25px 35px 45px</div>

10px 20px 30px 40px / 15px 25px 35px 45px

関連項目

border：枠線に関するスタイルをまとめて指定する
border-color：枠線の色を指定する
border-radius：枠線の角の丸みを指定する
border-style：枠線のスタイルを指定する
border-width：枠線の太さを指定する

HOMEへ　 TOPへ