border-style
- ブラウザ
境界線のスタイルをまとめて指定
border-style: 値;
上下左右の境界線のスタイルを一括で指定するプロパティです。
border-style: solid dashed double dotted;
| プロパティ名 | 値 | 説明 |
|---|---|---|
| border-style | none | 線なし （競合した場合は他の値を優先） |
| hidden | 線なし （競合した場合はこの値を優先） | |
| solid | 実線 | |
| double | 二重の線 | |
| groove | 谷型の線 | |
| ridge | 山型の線 | |
| inset | 凹型の線 | |
| outset | 凸型の線 | |
| dotted | 点線 | |
| dashed | 破線 |
- 上下左右の境界線のスタイルを、1〜4つの値で指定することができます。2つ以上の値で指定する場合は、半角スペースで区切って記述します。
- 「none」または「hidden」を指定すると、境界線の幅は「0」になります。
- 「none」と「hidden」は、境界線が重なり合った場合（表のセル同士など）の扱いが異なります。
- IE 7以下では「hidden」の指定に対応していないようです。
値の指定例
- solid … ［上下左右］ を指定
- solid dashed … ［上下］ と ［左右］ を指定
- solid dashed double … ［上］ と ［左右］ と ［下］ を指定
- solid dashed double dotted … ［上］ と ［右］ と ［下］ と ［左］ を指定
境界線の表示例
none （線なし）
solid （実線）
double （二重の線）
groove （谷型の線）
ridge （山型の線）
inset （凹型の線）
outset （凸型の線）
dotted （点線）
dashed （破線）
.example {
border-width: 2px;
border-color: #ff0000;
border-style: solid dashed;
}
