[CSS3 を使ってみる：第二回] 枠線を角丸にする(border-radius)

border-radius では border で付けた枠線を角丸にできる。

◆border-radius のプロパティ

border-radius: 半径;

id: borderRadius の角を半径 10px で角丸にする場合はこんな感じ。

#borderRadius {
  border-radius: 10px; /* Chrome、Opera で有効 */
 -webkit-border-radius: 10px; /* Safari、Chrome で有効 */
 -moz-border-radius: 10px; /* Firefox で有効 */
}

正式な記述形式となる「border-radius」単体は現在、Chrome と Opera しか対応しておらず、先頭に「-webkit-」や「-moz-」を付けないと Safari や Firefox では効果が反映されない。


また、今は Opera 以外の Safari、Chrome、Firefox のみが有効だが、それぞれの角に対して個別に設定することもできる。ただ、-webkit- と-moz- を置き換えればいいという訳ではなく、場所の記述も異なるので、めんどくさいところ。

/* WebKit 系 Safari、Chrome 用 */
-webkit-border-top-left-radius /* 左上 */
-webkit-border-top-right-radius /* 右上 */
-webkit-border-bottom-left-radius /* 左下 */
-webkit-border-bottom-right-radius /* 右下 */

/* Firefox 用 */
-moz-border-radius-topleft /* 左上 */
-moz-border-radius-topright /* 右上 */
-moz-border-radius-bottomleft /* 左下 */
-moz-border-radius-bottomright /* 右下 */

これを使って、左上と右下の角を半径 30px で角丸にしたい場合はこんな感じ。

#borderRadius {
 -webkit-border-top-left-radius: 30px; /* Safari、Chrome で有効 */
 -webkit-border-bottom-right-radius: 30px; /* Safari、Chrome で有効 */
 -moz-border-radius-topleft: 30px; /* Firefox で有効 */
 -moz-border-radius-bottomright: 30px; /* Firefox で有効 */
}

確認環境：
Safari 5.0、Firefox 3.6.3、Chrome 5.0.375.70、Opera 10.53

W3C：
CSS Backgrounds and Borders Module Level 3