構文
<line-width> || <line-style> || <color>プレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
ショートハンドの内訳
border-block8pxborder-block-width
solidborder-block-style
#88d1c7border-block-color
コード
.box {
border-block: 8px solid #88d1c7;
}コントロール
border-block-width8px
border-block-stylesolid
border-block-color#88d1c7
解説
値の書き方
- border と同じく、太さ・線種・色を順不同で書き、どれかを省けます。省いたものは初期値（
medium・none・currentcolor）になるので、線種を省くと枠線は出ません。 - 2 辺に同じ値を付けます。始まりと終わりで変えたいときは、
border-block-startとborder-block-endを後から書きます。
プレビューは横書きなので、上下に枠線が付きます。
向きで変わること
writing-mode: vertical-rlなどの縦書きでは、左右の枠線になります。- どの辺になるかは、親ではなくその要素自身の writing-mode で決まります。
よく使う場面
見出しや表の行の上下に区切り線を引くときに使います。縦書きのページでも、行が進む向きの両端に線が付きます。
気をつけること
- 横書きでは border-top・border-bottom と同じ辺を指します。同じ要素に両方書くと、後に書いたほうが効きます。
- border とちがい、
border-imageは初期値に戻しません。 - 主要なブラウザすべてで使えます。