これらのプロパティは、ボーダー領域の幅を指定します。
border-width関連プロパティでは、<border-width>型を使ってパディング幅を指定します。この型は次のいずれかの値となります。
| thin | 薄い（細い）ボーダー |
| medium | 中間サイズのボーダー |
| thick | 厚い（太い）ボーダー |
| <length> | 固定値（正の値）でボーダー幅を指定 |
thin, medium, thickの値の解釈は、ユーザーエージェントに依存しますが、次の関係が成立する必要があります。
thin <=medium <= thick
| 値 | <border-width> | inherit |
|---|---|
| 初期値 | medium |
| 適用可能な要素 | すべての要素 |
| 継承のデフォルト動作 | 継承しない |
| パーセンテージ値 | 指定不可 |
| メディアグループ | visual |
| 計算値 | 絶対長。ボーダースタイルがnoneまたはhiddenの場合は0 |
border-widthはborder-top-width, border-right-width, border-bottom-width, border-left-widthのためのショートハンドプロパティです。
| 値 | <border-width>{1,4} | inherit |
|---|---|
| 初期値 | medium |
| 適用可能な要素 | すべての要素 |
| 継承のデフォルト動作 | 継承しない |
| パーセンテージ値 | 指定不可 |
| メディアグループ | visual |
| 計算値 | 絶対長。ボーダースタイルがnoneまたはhiddenの場合は0 |
1～4個の値を指定できますが、その意味は値の数によって異なります。
以下は1～4個の値がどのボーダー領域に適応されるかを示す表です。値1はリストの先頭の値を意味します。
| 値の数 | 値1 | 値2 | 値3 | 値4 |
|---|---|---|---|---|
| 1 | TOP RIGHT BOTTOM LEFT | - | - | - |
| 2 | TOP RIGHT BOTTOM | RIGHT LEFT | - | - |
| 3 | TOP | RIGHT LEFT | BOTTOM | - |
| 4 | TOP | RIGHT | BOTTOM | LEFT |
p.test {
margin: 0px;
boarder: 0px;
padding: 0px;
}
h1.test1 {
color:white;
background: blue;
margin: 0px;
border-width: thin;
border-style: solid;
border-color: red;
padding: 0px;
}
h1.test2 {
color:white;
background: blue;
margin: 0px;
border-width: thin medium thick;
border-style: solid;
border-color: red;
padding: 0px;
上記の例で、test1クラスのH1要素はすべてのボーダー領域をthinに設定します。test2クラスのH1要素では、TOP=thin, RIGHT=LEFT=medium, BOTTOM=thickに設定します。
これを以下のHTMLで使うと、
body {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em;
}
p.test {
margin: 0px;
boarder: 0px;
padding: 0px;
}
h1.test1 {
color:white;
background: blue;
margin: 0px;
boarder: 0px;
padding: 1em 2em;
}
h1.test2 {
color:white;
background: blue;
margin: 0px;
boarder: ;
padding: 10px 20px 30px 40px;
}
上記のスタイルシートを、以下のHTMLで使うと、
<p class="test">P要素</p> <h1 class="test1">H1要素</H1> <p class="test">P要素</p> <h1 class="test2">H1要素</H1> <p class="test">P要素</p> </pre> <p> 次のように表示されます。</p> <p> <div class="border_radius" style="border:solid 1px steelblue;padding : 10px 10px 5px 10px"> <p class="test">P要素</p> <h1 class="test1">H1要素</H1> <p class="test">P要素</p> <h1 class="test2">H1要素</H1> <p class="test">P要素</p>
次のように表示されます。
P要素
H1要素
P要素
H1要素
P要素
これらのプロパティは、ボーダー領域の色を指定します。
| 値 | <color> | transparent | inherit <color>は特定の色、transparentは透明を指定する |
|---|---|
| 初期値 | colorプロパティ値 |
| 適用可能な要素 | すべての要素 |
| 継承のデフォルト動作 | 継承しない |
| パーセンテージ値 | 指定不可 |
| メディアグループ | visual |
| 計算値 | colorプロパティ値を使う場合、colorプロパティ値の計算値。そうでなければ値で指定された通り |
border-colorはborder-top-color, border-right-color, border-bottom-color, border-left-colorのためのショートハンドプロパティです。
| 値 | [<color> | transparent ]{1,4} | inherit <color>は特定の色、transparentは透明を指定する |
|---|---|
| 初期値 | colorプロパティ値 |
| 適用可能な要素 | すべての要素 |
| 継承のデフォルト動作 | 継承しない |
| パーセンテージ値 | 指定不可 |
| メディアグループ | visual |
| 計算値 | colorプロパティ値を使う場合、colorプロパティ値の計算値。そうでなければ値で指定された通り |
1～4個の値を指定できますが、その意味は値の数によって異なります。
以下は1～4個の値がどのボーダー領域に適応されるかを示す表です。値1はリストの先頭の値を意味します。
| 値の数 | 値1 | 値2 | 値3 | 値4 |
|---|---|---|---|---|
| 1 | TOP RIGHT BOTTOM LEFT | - | - | - |
| 2 | TOP RIGHT BOTTOM | RIGHT LEFT | - | - |
| 3 | TOP | RIGHT LEFT | BOTTOM | - |
| 4 | TOP | RIGHT | BOTTOM | LEFT |
p.test {
margin: 0px;
boarder: 0px;
padding: 0px;
}
h1.test1 {
color:white;
background: blue;
margin: 0px;
border-width: thin;
border-style: solid;
border-color: red;
padding: 0px;
}
h1.test2 {
color:white;
background: blue;
margin: 0px;
border-width: thin medium thick;
border-style: solid;
border-color: red;
padding: 0px;
上記の例で、test1クラスのH1要素はすべてのボーダー領域をthinに設定します。test2クラスのH1要素では、TOP=thin, RIGHT=LEFT=medium, BOTTOM=thickに設定します。
これを以下のHTMLで使うと、
body {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em;
}
h1.test3 {
color:black;
background: white;
margin: 0px;
border-width: 20px;
border-style: solid;
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: black;
padding: 0px;
}
上記のスタイルシートを、以下のHTMLで使うと、
<h1 class="test3">H1要素</H1>
次のように表示されます。
