CSS3 ボーダー

ブラウザ・サポート

Internet Explorer9は、新しいボーダープロパティの2つをサポートしています。

Firefox は、border-image に接頭辞 -moz- が必要です。

Chrome と Safari は、border-image に接頭辞 -webkit- が必要です。

Opera は、border-image に接頭辞 -o- が必要です。

Opera は、新たなボーダー・プロパティをサポートしています。

CSS3 角丸

CSS2では、角丸を追加するのは扱い難く、各コーナー毎に、異なる画像を使用しなければなりませんでした。

CSS3での角丸作成は簡単です。

CSS3では、角丸の作成に、border-radius プロパティを使用します:

例

div 要素に角丸を追加します:

div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}

Try it yourself »

CSS3 ボックスの影

CSS3 では、ボックスに影を加えるのに box-shadow プロパティを使用します:

例

div 要素へ box-shadow を加えます:

div
{
box-shadow: 10px 10px 5px #888888;
}

Try it yourself »

CSS3 画像ボーダー

CSS3 border-image プロパティにより、ボーダーの作成に画像を使用することができます:

上記のボーダーを作成するために使用した元の画像:

例

div 要素の周りにボーダーを作成するために画像を使用します:

div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

Try it yourself »

新ボーダー・プロパティ