border-style プロパティ
プロパティ border-style は、すべての辺の
境界線のスタイルを同時に、または各辺ごとに個別に
指定します。以下のプロパティの一括指定プロパティです:
border-left-style,
border-right-style,
border-top-style,
border-bottom-style.
構文
セレクタ {
border-style: 値;
}
値
| 値 | 説明 |
|---|---|
solid |
実線。 |
dotted |
点線の境界線。 |
dashed |
破線の境界線。 |
ridge |
隆起した線の境界線。 |
double |
二重線の境界線。
効果を見るには、境界線の幅は少なくとも 3px 以上である必要があります。
|
groove |
溝状の境界線。 |
inset |
埋め込み境界線。 |
outset |
浮き出し境界線。 |
none |
境界線なし。 |
初期値: none.
値の数
このプロパティは、1 個、2 個、
3 個、または 4 個の値を
スペースで区切って指定できます:
| 数 | 説明 |
|---|---|
1 |
すべての辺に同じスタイルを適用。 |
2 |
最初の値を上下、2番目の値を左右の境界線に適用。 |
3 |
最初の値を上、2番目の値を左右、3番目の値を下の境界線に適用。 |
4 |
最初の値を上、2番目の値を右、 3番目の値を下、4番目の値を左の境界線に適用。 |
例 . solid 値
<div id="elem"></div>
#elem {
border-width: 1px;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}
:
例 . dotted 値
<div id="elem"></div>
#elem {
border-width: 1px;
border-style: dotted;
border-color: black;
width: 300px;
height: 100px;
}
:
例 . dashed 値
<div id="elem"></div>
#elem {
border-width: 1px;
border-style: dashed;
border-color: black;
width: 300px;
height: 100px;
}
:
例 . ridge 値
<div id="elem"></div>
#elem {
border-width: 3px;
border-style: ridge;
border-color: black;
width: 300px;
height: 100px;
}
:
例 . double 値
<div id="elem"></div>
#elem {
border-width: 3px;
border-style: double;
border-color: black;
width: 300px;
height: 100px;
}
:
例 . groove 値
<div id="elem"></div>
#elem {
border-width: 3px;
border-style: groove;
border-color: black;
width: 300px;
height: 100px;
}
:
例 . inset 値
<div id="elem"></div>
#elem {
border-width: 3px;
border-style: inset;
border-color: black;
width: 300px;
height: 100px;
}
:
例 . outset 値
<div id="elem"></div>
#elem {
border-width: 3px;
border-style: outset;
border-color: black;
width: 300px;
height: 100px;
}
:
例
この例では、要素の各辺に異なる種類の境界線スタイルを 指定しています:
<div id="elem"></div>
#elem {
border-width: 1px;
border-style: solid dotted dashed dotted;
border-color: black;
width: 300px;
height: 100px;
}
:
例
今度は、要素の各辺に対して境界線の幅と色も 異なる値で指定しています:
<div id="elem"></div>
#elem {
border-width: 1px 2px 3px 4px;
border-style: dashed dotted solid double;
border-color: red blue green black;
width: 300px;
height: 100px;
}
:
例
ここでは、上下の境界線には solid を、
左右の境界線には dotted を
指定しています:
<div id="elem"></div>
#elem {
border-width: 1px;
border-style: solid dotted;
border-color: black;
width: 300px;
height: 100px;
}
:
関連項目
-
境界線の色を指定するプロパティ
border-color -
境界線の幅を指定するプロパティ
border-width -
境界線に関する一括指定プロパティ
border
