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方向個別に指定 サンプル

