概要
コンテナーのボーダーのスタイル、太さ、色を指定する。
書式
以下の書式で上下左右全てのボーダーのスタイル・太さ・色を一括指定。
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
- ブロック全体が盛り上がったように見える線。
動作確認
指定方法
一括指定
周囲全てのボーダーのスタイル・太さ・色を一括指定する場合、値の順番は任意。
solid 1px blue;
border: 3px solid red;
個別ボーダーの指定
border-top: solid 3px red;
border-bottom: solid 3px red;
border-left: solid 3px red;
border-right: solid 3px red;
線のスタイル
solid 2px
dotted 2px
dashed 2px
double 4px
groove 8px
ridge 8px
inset 8px
inset 8px
以下は表のセルの罫線が重なるようにしている。
- cccのセルのボーダースタイルはnoneなので、aaaのセルのボーダーは表示され、他のボーダーは表示されない
- dddのセルのボーダースタイルはhiddenなので、bbbのセルのボーダーは表示されず、他のボーダーも表示されない
| aaa | bbb |
| ccc |