CSS3入門道場

Border

本章では、CSS3で追加されたボーダー関係の機能を見て行きます。

メニュー

参考リンク

ブラウザサポート

本章で紹介するborder-radius、box-shadowは、どのブラウザでもサポートされています。border-imageについては、IEは11からサポートで、他のブラウザでは良好にサポートされています(但し、Androidブラウザ4.3までについては、下記のリンクも参照下さい)。

参照:Can I use
Border-radius
Border images
Box-shadow

border-radius

border-radiusでは、ブロック要素の角を丸くすることができます。要素の4つの角を個別に指定するプロパティとそれらをまとめたショートハンドがあります。以下になります。

xは水平方向の長さで、yは垂直方向です。共に同じ値の時は、1つの指定で大丈夫です。

ショートハンドは、marginなどと同じく、1~4つ指定するタイプがあります。border-radiusの場合は、左上から始まります。

上記のイメージ結果です。

ショートハンドでもxとyを分けて書くことができます。その場合は、スラッシュを1つ使います。スラッシュ前がx系の指定、スラッシュ後がy系の指定となります。スラッシュの前後とも、1~4つまで各々指定できます。指定方法は、先で見た4パターンと同様になります。

%の指定も可能です。%の時は、対象の壁面の長さに対する割合となります。四角形の要素に対して、50%指定を使うと、楕円形が描けます。特に正方形の場合は、丸い円になります。

画像などにも適用できます。

Copyright 2015 CSS3入門道場 All Rights Reserved.