border-top-style, border-right-style, border-bottom-style, border-left-style
上下左右の境界線の太さ
border-top-style: 値;
border-right-style: 値;
border-bottom-style: 値;
border-left-style: 値;
上下左右の境界線のスタイルを個別に指定するプロパティです。
border-top-style: solid;
border-right-style: double;
border-bottom-style: dotted;
border-left-style: dashed;
プロパティ名 | 値 | 説明 |
---|---|---|
border-top-style (上)
border-right-style (右) border-bottom-style (下) border-left-style (左) |
none | 線なし (競合した場合は他の値を優先) (初期値) |
hidden | 線なし (競合した場合はこの値を優先) | |
solid | 実線 | |
double | 二重の線 | |
groove | 谷型の線 | |
ridge | 山型の線 | |
inset | 凹型の線 | |
outset | 凸型の線 | |
dotted | 点線 | |
dashed | 破線 |
- 「none」または「hidden」を指定すると、境界線の幅は「0」になります。
- 「none」と「hidden」は、境界線が重なり合った場合(表のセル同士など)の扱いが異なります。
- IE 7以下では「hidden」の指定に対応していないようです。
境界線の表示例
none (線なし)
solid (実線)
double (二重の線)
groove (谷型の線)
ridge (山型の線)
inset (凹型の線)
outset (凸型の線)
dotted (点線)
dashed (破線)
.example {
border-width: 2px;
border-color: #ff0000;
border-top-style: solid;
border-right-style: double;
border-bottom-style: dotted;
border-left-style: dashed;
}