CSS3よりborder-radiusのプロパティを使う事で簡単に角丸のオブジェクトが表現できるようになりました。
今回はborder-radiusを使って様々な角丸のサンプルを紹介したいと思います。
border-radius の記述方法
border-radius の値について
border-radiusは以下のような記述をします。
|
1 2 3 4 5 |
.box { -webkit-border-radius:10px 10px 10px 10px; -moz-border-radius:10px 10px 10px 10px; border-radius:10px 10px 10px 10px; } |
値は、「左上」「右上」「右下」「左下」の順に記述します。
-moz-や-webkit-などの「ベンダープレフィックス」合わせて記述しておきます。
1辺の値を省略
以下のように1辺の値（左下）の値が省略された場合は、「右上」の値（以下のサンプルだと 5px ）が適用されます。|
1 2 3 |
.box { border-radius:10px 5px 10px; } |
margin:10px 5px 10pxのように値が省略されるイメージと同じです。
1辺のみ値を記述
以下のように、値が1つの場合は4つの角が全て 10px の角丸になります。|
1 2 3 |
.box { border-radius:10%; } |
margin:10pxのように値が省略されるイメージと同じです。
四隅を角丸にする記述例
「左上」「右上」「右下」「左下」の四辺を角丸にするサンプルです。|
1 2 3 4 5 |
.box { -webkit-border-radius:10px 10px 10px 10px; -moz-border-radius:10px 10px 10px 10px; border-radius:10px 10px 10px 10px; } |
以下のように省略して記述することも可能です。
|
1 2 3 4 5 |
.box { -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; } |
サンプル
サンプルはこんな感じです。（※IE8 以下では見れません）四隅を角丸にする
「左上」のみ角丸にする記述例
今度は「一辺のみ」角丸にする記述例として、まずは「左上」のみ1辺を角丸にする記述例です。|
1 2 3 4 5 |
.box { -webkit-border-radius:10px 0 0 0; -moz-border-radius:10px 0 0 0; border-radius:10px 0 0 0; } |
以下のように、border-top-left-radiusと左上に絞って記述することもできます。
|
1 2 3 4 5 |
.box { -webkit-border-top-left-radius:10px; -moz-border-top-left-radius:10px; border-top-left-radius:10px; } |
サンプル
「左上」のみ角丸にする
「右上」のみ角丸にする記述例
「右上」のみ1辺を角丸にする方法です。|
1 2 3 4 5 |
.box { -webkit-border-radius: 0 10px 0 0; -moz-border-radius: 0 10px 0 0; border-radius: 0 10px 0 0; } |
以下のように、border-top-right-radiusと右上に絞って記述することもできます。
|
1 2 3 4 5 |
.box { -webkit-border-top-right-radius:10px; -moz-border-top-right-radius:10px; border-top-right-radius:10px; } |
「右上」のみ角丸にする
「右下」のみ角丸にする記述例
「右下」のみ1辺を角丸にする方法です。|
1 2 3 4 5 |
.box { -webkit-border-radius: 0 0 10px 0; -moz-border-radius: 0 0 10px 0; border-radius: 0 0 10px 0; } |
以下のように、border-bottom-right-radiusと右上に絞って記述することもできます。
|
1 2 3 4 5 |
.box { -webkit-border-bottom-right-radius:10px; -moz-border-bottom-right-radius:10px; border-bottom-right-radius:10px; } |
サンプル
「右下」のみ角丸にする
「左下」のみ角丸にする記述例
最後に「左下」のみ1辺を角丸にする方法です。|
1 2 3 4 5 |
.box { -webkit-border-radius: 0 0 0 10px; -moz-border-radius: 0 0 0 10px; border-radius: 0 0 0 10px; } |
以下のように、border-bottom-left-radiusと右上に絞って記述することもできます。
|
1 2 3 4 5 |
.box { -webkit-border-bottom-left-radius:10px; -moz-border-bottom-left-radius:10px; border-bottom-left-radius:10px; } |
[/css]
サンプル
「左下」のみ角丸にする
値の組み合わせ方次第で「上辺」のみを角丸、「下辺」のみを角丸 なども可能です。
コメント