|
カスタム検索
|
|
|
|
|
border-xxx-width
border-top-width、border-right-width、border-bottom-width、border-left-widthプロパティ| 機能 | ボーダー（枠線）の太さを上下左右個別に定義 |
|---|---|
| 指定可能な値 | 長さ、thin, medium, thick |
| 初期値 | medium |
| 継承 | しない |
| 適用可能なボックス | 全て |
border-top-width、border-right-width、border-bottom-width、border-left-widthプロパティは、要素のボーダー（枠線）の太さを上下左右で個別に定義します。指定できるプロパティの値は、border-widthと同じです。ただし、枠線のスタイルがborder-styleプロパティ等で指定されていなければ、設定は反映されません。
example.css
div.thin {
border-left-style: solid;
border-left-width: thin;
}
div.medium {
border-right-style: solid;
border-right-width: medium;
}
div.thick {
border-top-style: solid;
border-top-width: thick;
}
div.width1px {
border-bottom-style: solid;
border-bottom-width: 1px;
}
div.width4px {
border-left-style: solid;
border-right-style: solid;
border-left-width: 4px;
border-right-width: 4px;
}
div.width8px {
border-top-style: solid;
border-bottom-style: solid;
border-top-width: 8px;
border-bottom-width: 8px;
}
このプロパティはあまり使用されません
これら、border-top-width、border-right-width、border-bottom-width、border-left-widthプロパティを使用して表示するスタイルは、
- border-top
- border-right
- border-bottom
- border-left
を使用しても実現できるので、通常、あまり使用することはありません。
border-width
ページの先頭
2024 Webデザインレッスン