-moz-border-radius

■ 注意

Gecko系の独自拡張で、chrome用・CSS3の先行実装の実験用です(参照:Mozillaの独自拡張CSSは使わないでください)。

実験的なものなので将来削除される可能性があります。

■ 用語の簡単な解説

'-moz-border-radius'プロパティは、要素の角を丸めるプロパティです。

値には<length>を指定できます。

CSS3草稿にあるborder-radiusの先行実装では無いということに注意してください。

また同様の指定方法に

• -moz-border-radius-topleft?
• -moz-border-radius-topright?
• -moz-border-radius-bottomleft?
• -moz-border-radius-bottomright?

があります。

.mbr_1 , .mbr_2 , .mbr_3 , .mbr_4 {
 width:100px; height:100px;
}
div.mbr_1 {-moz-border-radius: 20px;}
div.mbr_2 {-moz-border-radius: 20px 10px;}
div.mbr_3 {-moz-border-radius: 20px 10px 5px;}
div.mbr_4 {-moz-border-radius: 20px 10px 5px 2px;}

この場合

div.mbr_1

全て20px。

div.mbr_2

左上・右下が20px、右上・左下が10px。

div.mbr_3

左上が20px、右上・左下が10px、右下が5px。

div.mbr_4

左上が20px、右上が10px、右下が5px、左下が2px。

と角が丸められます。

■ プロパティ

値

<length> (%で指定の場合は0-50,)

初期値

0

使用可能な要素

html,head,body以外

継承

不可