概要
コンテナーのボーダーのスタイル、太さ、色を指定する。
書式
以下の書式で上下左右全てのボーダーのスタイル・太さ・色を一括指定。
border: [スタイル] [太さ] [色] 値の順番は任意
以下の書式はスタイル／太さ／色のいずれかを全てのボーダーに対して一括指定。
border-style: [スタイル]
border-width: [太さ]
border-color: [色]
以下の書式は上／下／左／右のいずれかのボーダーに対してスタイル・太さ・色を一括指定。
border-top: [スタイル] [太さ] [色]
border-bottm: [スタイル] [太さ] [色]
border-left: [スタイル] [太さ] [色]
border-right: [スタイル] [太さ] [色]
また上記4つそれぞれについてスタイル、太さ、色のみを個別に指定可能。border-topを例にとると以下の通り。
border-top-style: [スタイル]
border-top-width: [太さ]
border-top-color: [色]
値
スタイル
- none
- 非表示で太さも0になる。他のボーダーと重なる場合、他方のボーダーの値が優先される。
- hidden
- 非表示で太さも0になる。他のボーダーと重なる場合、この値が優先されて非表示になる。
- solid
- 実線。
- dotted
- 点線。
- dasshed
- 破線。
- double
- 二重線。指定した線の太さの中で二重線になるため、1本の線は細くなる。
- groove
- 立体的に窪んだ線（ノミなどで掘り込んだような線）。
- ridge
- 立体的に盛り上がって線（土手のような線）。
- inset
- ブロック全体が窪んだように見える線。
- outset
- ブロック全体が盛り上がったように見える線。
動作確認
指定方法
一括指定
周囲全てのボーダーのスタイル・太さ・色を一括指定する場合、値の順番は任意。
|
1 2 |
<p style="border: solid 3px blue;">solid 1px blue;</p> <p style="border: 3px solid red;">border: 3px solid red;</p> |
solid 1px blue;
border: 3px solid red;
個別ボーダーの指定
|
1 2 3 4 |
<p style="border-top: solid 3px red;">border-top: solid 3px red;</p> <p style="border-bottom: solid 3px red;">border-bottom: solid 3px red;</p> <p style="border-left: solid 3px red;">border-left: solid 3px red;</p> <p style="border-right: solid 3px red;">border-right: solid 3px red;</p> |
border-top: solid 3px red;
border-bottom: solid 3px red;
border-left: solid 3px red;
border-right: solid 3px red;
線のスタイル
|
1 2 3 4 5 6 7 8 |
<p style="border: solid 2px">solid 2px</p> <p style="border: dotted 2px">dotted 2px</p> <p style="border: dashed 2px">dashed 2px</p> <p style="border: double 4px">double 4px</p> <p style="border: groove 8px">groove 8px</p> <p style="border: ridge 8px">ridge 8px</p> <p style="border: inset 8px">inset 8px</p> <p style="border: outset 8px">inset 8px</p> |
solid 2px
dotted 2px
dashed 2px
double 4px
groove 8px
ridge 8px
inset 8px
inset 8px
以下は表のセルの罫線が重なるようにしている。
- cccのセルのボーダースタイルはnoneなので、aaaのセルのボーダーは表示され、他のボーダーは表示されない
- dddのセルのボーダースタイルはhiddenなので、bbbのセルのボーダーは表示されず、他のボーダーも表示されない
|
1 2 3 4 5 6 7 8 9 10 |
<table style="border-collapse: collapse;"> <tr> <td style="border: solid blue;">aaa</td> <td style="border: solid red;">bbb</td> </tr> <tr> <td style="border: none;">ccc</td> <td style="border: hidden;">ddd</td> </tr> </table> |
| aaa | bbb |
| ccc |