border-style
CSSの書き方
border-style:線種 線種 …;
CSSの詳細情報 | |||||
---|---|---|---|---|---|
プロパティ名 | border-style | 対応ブラウザ | Windows | MAC | |
読み方 | ボーダースタイル | IE 5.0以上(※)/FF1.0/NS7.1/OP8.0 | SF/IE5.0 | ||
意味 | 外枠線種 | CSSレベル | CSSレベル1 | ||
設定値 | 線種 | 対象 | すべての要素 | ||
デフォルト | none | 継承 | しない |
※WindowsIE5.0に一部制限あり
解説
ボックスの外枠(境界線)は、線種をまとめて指定することもできます。
ボーダースタイルプロパティに対する値はその数によって、指定できる上下左右の方向が以下の表のようになります。
記入する値の数 | 対象の方向 |
---|---|
1つ | 四方向(上/下/左/右)同じ |
2つ | 鉛直と水平方向(上下/左右の順) |
3つ | 上/左右/下の順 |
4つ | 右回り方向(上/右/下/左の順) |
線の種類
スタイルシートで指定できる線種は以下のようなスタイルがあります。
線種 | スタイル |
---|---|
none | なし(透明) |
solid | 実線 |
dashed | 破線 |
dotted | 点線 |
double | 二重線 |
groove | くぼみ |
ridge | 浮きだし |
inset | 立体くぼみ |
outset | 立体浮きだし |
一部制限あり
Windows版のInternetExplorer5.0以前では「dashed(破線)」と「dotted(点線)には対応していません。
どちらで指定しても実線で表示されます。
CSS/HTMLサンプル
div { border:3px; border-style:solid dotted dashed; }
DIV要素の外枠の太さを3ピクセル、線種を4方向個別に指定 サンプル