角丸 - Rubellum fly light

CSS3で角丸が表現できるようになったのは良いものの，主要ブラウザ間で指定方法が統一されてないという相変わらずな状態なのでちょろっとまとめてみた。
ブラウザのバージョンは現在手に入る最新のバージョン（あんまり意味無いかも…？）。
ちなみに OS は Mac OS X 10.6.4 。

最新バージョン(2010/08/21時点)での対応表。

	Safari(5.0.1)	Firefox(3.6.8)	Opera(10.60)	Chrome(5.0.375.127)
border-radius	◯	×	◯	◯
-moz-border-radius	×	◯	×	×
-webkit-border-radius	◯	×	×	◯
-o-border-radius	×	×	×	×

Opera は -o-border-radius で指定する必要があった（気がする）が，これだと動かない。

とりあえず「border-radius」「-moz-border-radius」「-webkit-border-radius」の３つを指定すれば良いような気がする。

まぁ全部指定が無難かな…。

あとチェックしたときのソース。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>角丸</title>
<style>

div {
  width:400px;
  border: 3px solid #888;
}

.rad {
  border-radius: 10px;
}

.rad-moz {
  -moz-border-radius:10px;
}

.rad-webkit {
  -webkit-border-radius:10px;
}

.rad-opera {
  -o-border-radius:10px;
}

</style>
</head> 
<body>
<h1>角丸</h1>
<div class="rad">border-radius</div>
<div class="rad-moz">-moz-border-radius</div>
<div class="rad-webkit">-webkit-border-radius</div>
<div class="rad-opera">-o-border-radius</div>
</body>
</html>