読者です 読者をやめる 読者になる 読者になる

Rubellum fly light

ほぼPHP日記

角丸

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」の3つを指定すれば良いような気がする。

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

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

<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>