border-radius（CSS3追加プロパティ）で簡単に角丸を実現！

• CSS
• コメント(0)
• 2012年1/13

今まではわざわざ画像を作って表現していた角丸。
それをとてつもなく簡単に表現できるようにしてくれるプロパティが”border-radius”です。

CSSで角丸を一括で表現するには

border-radius:5px;

プロパティを使います。
一括で指定したくない場合は、

border-top-left-radius:5px; /* 左上 */
border-top-right-radius:5px; /* 右上 */
border-bottom-left-radius:5px; /* 右下 */
border-bottom-right-radius:5px; /* 左下 */

と記入すればそれぞれのコーナーを角丸に指定することができます。

ちなみに各プラウザに対応させるために一緒に書いてあげると安心の
ベンダープレフィックスを付けた場合の書き方がこちら。

border-radius:5px; /* 記述無し */
-moz-border-radius:5px; /* Firefox */
-webkit-border-radius:5px; /* Google Chrome、Safari */
-o-border-radius:5px; /* Opera */
-ms-border-radius:5px; /* Internet Explorer */