|
カスタム検索
|
|
|
|
|
border-style
border-styleプロパティ| 機能 | ボーダー（枠線）のスタイルの定義 |
|---|---|
| 指定可能な値 | none(hidden), solid, double, dotted, dashed, groove, ridge, inset, outset |
| 初期値 | none |
| 継承 | しない |
| 適用可能なボックス | 全て |
border-styleプロパティは、要素のボーダー（枠線）のスタイルを定義します。border-styleプロパティの値には、次のような値を指定することができます。
| 値 | 表示形態 |
|---|---|
| solid | 実線 |
| double | 二重線 |
| dotted | 点線 |
| dashed | 破線 |
| groove | 埋め込まれて見える線 |
| ridge | 浮き上がって見える線 |
| inset | 要素が埋め込まれているように見せる |
| outset | 要素が浮き上がっているように見せる |
どのように表示されるかは、実際に次の入力例の確認ページを見てもらった方が分かりやすいと思います。
example.css
div.solid {
border-style: solid;
}
div.double {
border-style: double;
}
div.dotted {
border-style: dotted;
}
div.dashed {
border-style: dashed;
}
div.groove {
border-style: groove;
}
div.ridge {
border-style: ridge;
}
div.inset {
border-style: inset;
}
div.outset {
border-style: outset;
}
各辺を個別に設定
border-styleの値をスペースで区切って、複数指定すると、各辺のスタイルを個別に設定することができます。ただし、この方法は、直感的に分かりやすいとは思えないので、あまりお勧めしません。
| 値の数 | 設定される辺 |
|---|---|
| 1 | 4辺全て |
| 2 | 最初の値が上下、2番目の値が左右 |
| 3 | 最初の値が上、2番目の値が左右、3番目の値が下 |
| 4 | 最初の値が上、2番目の値が右、3番目の値が下、4番目の値が左 |
example2.css
div.number1 {
border-style: solid;
}
div.number2 {
border-style: solid double;
}
div.number3 {
border-style: solid double dotted;
}
div.number4 {
border-style: solid double dotted dashed;
}
このborder-styleプロパティはあまり使用されません
borderプロパティを使用すれば、枠線に関する指定も可能です。というよりも、borderプロパティと役割は結果的に同じです。通常はborder-styleプロパティを使用せずに、borderプロパティを使用します。
border-xxx
ページの先頭
2026 Webデザインレッスン