CSS3の中でも、border-radiusは特によく使うプロパティです。

border-radius
指定したボックスの角の丸みについて設定するプロパティ

このプロパティに関して、少し思うことがあったので軽くまとめておきます。

数値指定について

例えば、半径75ピクセルの円を作るとき

.example {
	width: 150px;
	height: 150px;
	border-radius: 75px; 
}

としている例をよく見かけるですが、こういう時って

.example {
	width: 150px;
	height: 150px;
	border-radius: 50%; 
}

としたほうが効率よくないですか?確かドットインストールのCSS3入門でやっていたと思うんですが・・・。

[browser-shot url=”http://dotinstall.com/lessons/basic_css3/7904” width=”250”]#04 角丸を使ったテクニック | CSS3入門 - プログラミングならドットインストール

ありましたね。

border-radiusはCSS3でもかなり使うプロパティである分、こうやって指定しておくと後々メンテナンスとかやりやすいと思います。

ベンダープレフィックスについて

CSS3の実装時に気になるベンダープレフィックスですが、正直自分はborder-radiusに関してはつけなくてもいいような気がします。

というのも、きちんと現行ブラウザでは表示がされるからです。

[browser-shot url=”http://delaymania.com/201208/web/vendor_prefixed_none/” width=”250”]box-shadow,border-radiusを書くときにCSS3のベンダープレフィックスは要らない | delaymania

「いやいや、古いブラウザのことも考えないとダメだよ!」と思う方もいらっしゃるかもしれませんが、個人的には古いブラウザの対応はあまり考えたくないというか・・・まぁめんどくさいです(笑)

ですから、自分はborder-radiusにベンダープレフィックスはつけていません。

参考 - CSS3プロパティ&ブラウザ対応一覧

今回の記事の主題とは逸れますが、CSS3の実装時に気になるのがブラウザの対応状況です。

確認方法はいろいろあるかと思いますが、今回記事を書くにあたって色々調べていると便利なサイトを見つけましたので、最後にリンクを貼っておきます。

CSS3プロパティとブラウザの対応状況が一覧で確認できるページです。

少し古いのですが、軽く見る程度なら十分使えると思います。

[browser-shot url=”http://ebisu.com/note/css3/” width=”250”]CSS3プロパティ&ブラウザ対応一覧 – E BISUCOM TECH LAB

また、最新情報はこの書籍から確認できるそうです。参考までに。

[amazonjs asin=”4839946965” locale=”JP” title=”CSS3 スタンダード・デザインガイド【改訂第2版】 (Web Designing Books)”]