border-radius(CSS3追加プロパティ)で簡単に角丸を実現!
今まではわざわざ画像を作って表現していた角丸。
それをとてつもなく簡単に表現できるようにしてくれるプロパティが”border-radius”です。
CSSで角丸を一括で表現するには
CSS
border-radius:5px;
プロパティを使います。
一括で指定したくない場合は、
CSS
border-top-left-radius:5px; /* 左上 */ border-top-right-radius:5px; /* 右上 */ border-bottom-left-radius:5px; /* 右下 */ border-bottom-right-radius:5px; /* 左下 */
と記入すればそれぞれのコーナーを角丸に指定することができます。
ちなみに各プラウザに対応させるために一緒に書いてあげると安心の
ベンダープレフィックスを付けた場合の書き方がこちら。
CSS
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 */