CSSで角丸を実現する

一昔前はtableタグ+画像で実現していた角丸(角の丸い見た目)も、 最近のブラウザーではCSSだけで実現できます。(IEは8以下は認識しません)

たとえば角が10px分丸い四角を用意したい場合は、


角丸にしています

↓↓以下のように定義しています。

↑ご覧のブラウザーでは、黒い領域の角は丸くなって見えていますか?

使い方

例えば角を10px分、丸くしたい場合はそれぞれのブラウザーごとに、


CSS3で定義 border-radius: 10px;
webkit系ブラウザー用(safariやchrome) -webkit-border-radius: 10px;
mozilla用(firefox用) -moz-border-radius: 10px;
opera用 -o-border-radius: 10px;

と、定義します。

対応させたいブラウザーごとにCSSを用意する必要があるようです。
記述が多くなりますが、画像やJavaScriptの用意がいらないので、これからぜひ導入したいですね。

素材のトップへ

スポンサードリンク

スポンサードリンク

SOZAI | 素材

その他