CSSを使って角丸を表現する方法

2010.1.1

IE系ブラウザに対して角丸を適用するには、横幅を固定にした「天」「中」「地」の画像を作成し、

タグの3重入れ子を作って、CSS側で背景画像として適用というのが一般的な方法でした。FireFoxとSafariに限定すれば、角丸の表現もCSSを使って非常に簡単に設定することができます。設定方法は以下です。

上2つだけ角丸にする

-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;

全てを角丸にする

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

divなどのボックスに使ってもいいし、span、aタグに対して使っても良いかもしれません。角丸という表現技法だけでもデザインの幅がぐっと広がりますね。

• toggle | web, branding & graphic design
• CSS Border Radius

[itemlink post_id=”1945″]