今まではわざわざ画像を作って表現していた角丸。
それをとてつもなく簡単に表現できるようにしてくれるプロパティが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 */
comment