border-radius
border-radiusプロパティは、四つ角の半径を一括指定できるショートハンドプロパティです。
これにより、指定した要素の角を角丸にする事ができます。
角を丸くするだけなのにこのプロパティが使えるだけで、角丸なサイトのデザイン再現用のdiv要素が減り、コーディングもかなり楽になってきます。
とはいえ、角丸は情報を提供するだけなら有っても無くても変わりませんが、ユーザーに与える印象は大きく異なってきます。なので、IEユーザーが多い現状では、デザインとして重要な部分は従来通り背景画像にするなど、訪れるユーザーの事も考慮しながら使うと良いかと思います。
なお、border-radiusプロパティを含む、「CSS Backgrounds and Borders Module Level 3」は現在(2010/01/17) Candidate Recommendation(勧告候補)なので、まだ仕様が変更される可能性が有りますが、勧告候補まで進むとブラウザへの実装を呼びかけることになるため、大きな仕様変更は無いかと思います。
これにタイミングが有ってたのかわかりませんが、Chrome4ではプレフィックス(接頭辞)を付けなくても適用されるみたいです。
- 対応ブラウザ
-
IEは9から対応。
プロパティの解説
- 値
- [ <長さ>|<パーセント> ]{1,4} [ / [ <長さ>|<パーセント> ]{1,4} ]?|inherit
- 初期値
- 0
- 適用される要素
-
全ての要素。ただし、border-collapseプロパティの値が
collapse
のテーブル要素は除く。 - 継承
- しません
- パーセント値
- ボーダーボックスに対する割合
- メディア
- visual
border-radiusプロパティは、Forefoxで実装するにはプロパティにプレフィックス「-moz-」を付ける必要が有り、WebKit系(SafariやChrome)で実装するには「-webkit-」を付けます。
border-radiusのサンプル 01
<div class="sample01">
<p class="radius01">border-radius: 10px;</p>
<p class="radius02">-webkit-border-radius: 10px;</p>
<p class="radius03">-moz-border-radius: 10px;</p>
</div>
.sample01 p {
margin: 20px;
padding: 15px;
background: #00208b;
color: #fff;
}
.sample01 p.radius01_01 {
border-radius: 10px;
}
.sample01 p.radius01_02 {
-webkit-border-radius: 10px;
}
.sample01 p.radius01_03 {
-moz-border-radius: 10px;
}
まずは、もっとも簡単なサンプルで同じように四つ角の半径を指定しています。
ちなみに、border-radiusとはいえ背景色の指定などが有ればボーダーの指定が無くても大丈夫です。
このサンプルを今見ているブラウザで表示すると以下のようになります。
- サンプルのブラウザ上の表示
-
border-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radiusのサンプル 02
<div class="sample02">
<p class="radius01">border-radius: 5px 10px 50px 20px;。値4つのサンプルです。</p>
<p class="radius02">-webkit-border-radius: 5px 10px 50px 20px;。値4つのサンプルです。</p>
<p class="radius03">-moz-border-radius: 5px 10px 50px 20px;。値4つのサンプルです。</p>
<p class="radius04">border-border-radius: 5px 20px;。値2つのサンプルです。</p>
<p class="radius05">-webkit-border-radius: 5px 20px;。値2つのサンプルです。</p>
<p class="radius06">-moz-border-radius: 5px 20px;。値2つのサンプルです。</p>
</div>
.sample02 p {
margin: 20px;
padding: 15px;
border: 5px solid #e17b1b;
}
.sample02 p.radius06,
.sample02 p.radius05,
.sample02 p.radius04 {
border-color: #008d3b;
}
.sample02 p.radius01 {
border-radius: 5px 10px 50px 20px;
}
.sample02 p.radius02 {
-webkit-border-radius: 5px 10px 50px 20px;
}
.sample02 p.radius03 {
-moz-border-radius: 5px 10px 50px 20px;
}
.sample02 p.radius04 {
border-radius: 5px 20px;
}
.sample02 p.radius05 {
-webkit-border-radius: 5px 20px;
}
.sample02 p.radius06 {
-moz-border-radius: 5px 20px;
}
今度は、個別に半径を指定したサンプルです。
このサンプルを今見ているブラウザで表示すると以下のようになります。
- サンプルのブラウザ上の表示
-
border-radius: 5px 10px 50px 20px;。値4つのサンプルです。
-webkit-border-radius: 5px 10px 50px 20px;。値4つのサンプルです。
-moz-border-radius: 5px 10px 50px 20px;。値4つのサンプルです。
border-border-radius: 5px 20px;。値2つのサンプルです。
-webkit-border-radius: 5px 20px;。値2つのサンプルです。
-moz-border-radius: 5px 20px;。値2つのサンプルです。
Safari4では、四つ角を個別に指定するとまったく反映されず、値が2つの場合だと変な角丸になってしまい、指定した通りには反映されないようです。また、Chrome4でも値が2の場合にプレフィックスを付けていると変な角丸になるようです。
これらの事から、現状では値は1つにしておくのが良いかと思いますが、値を2つ書く場合、以下のように宣言は独自実装から先に記述した方が良さそうです。
p.sample {
-moz-border-radius: 5px 20px;
-webkit-border-radius: 5px 20px;
border-radius: 5px 20px;
}
border-radiusのサンプル 03
<div class="sample03">
<p class="radius01">border-radius: 10px / 50px;</p>
<p class="radius02">-webkit-border-radius: 10px / 50px;</p>
<p class="radius03">-moz-border-radius: 10px / 50px;</p>
</div>
.sample03 p {
margin: 20px;
padding: 15px;
background: #666;
color: #fff;
}
.sample03 p.radius01 {
border-radius: 10px / 50px;
}
.sample03 p.radius02 {
-webkit-border-radius: 10px / 50px;
}
.sample03 p.radius03 {
-moz-border-radius: 10px / 50px;
}
値を半角スラッシュ(/
)で区切って指定すると、スラッシュより前が水平方向の半径を指定し、後ろが垂直方向の半径を指定します。なので、この場合だと小カッコ () のような角丸になります。
このサンプルを今見ているブラウザで表示すると以下のようになります。
- サンプルのブラウザ上の表示
-
border-radius: 10px / 50px;
-webkit-border-radius: 10px / 50px;
-moz-border-radius: 10px / 50px;
こんな感じで色々楽しめるので個人サイト等では使っていける感じですが、 /
を使って指定した場合もSafari4では全く反映されなくなってしまったりと、現状ではブラウザによる実装具合の関係からも使う場合は注意が必要です。