CSS3の border-radius で角丸を表現

今まで画像を使って表現していた角丸を簡単に表現できてしまうプロパティが border-radius です。
ということで使い方の紹介。

デモページ

今現在はOperaは border-radius、 Safari、Google Chrome は -webkit-border-radius、Firefox は -moz-border-radius と指定するようになってます。
残念ながら IE は border-radius による角丸は表現できません…

まずは全てまとめて10pxの角丸を指定してみます。

Example1:

[css]
.example1 {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
[/css]

各角を別々に指定する場合は以下のように指定します。

Example2:

[css]
.example2 {
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 40px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 40px;
}
[/css]

borderの要素を変えることも出来ます。
※全てまとめて10pxの角丸を指定しています。

Example3:

[css]
.border1 {
border: 5px solid #CCC;
}
.border2 {
border: 5px dotted #CCC;
}
.border3 {
border: 5px dashed #CCC;
}
.border4 {
border: 5px double #CCC;
}
.border5 {
border: 5px groove #CCC;
}
.border6 {
border: 5px inset #CCC;
}
.border7 {
border: 5px ridge #CCC;
}
.border8 {
border: 5px outset #CCC;
}
[/css]

どうしても IE で角丸を表現したい場合はJavascript等で実装させます。

border-radius.js – JavaScript ライブラリー – HTML5.JP

※IE8には未対応みたいです。

Curved corner (border-radius) cross browser | HTML Remix

※IE6, 7, 8に対応しています。