ボーダー
box-decoration-break
box-decoration-break は、行や段の区切りで分かれた要素の背景・枠線・内側の余白・角丸を、分かれた所でどう描くかを指定します。
構文
slice | cloneプレビュー
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
line-height: 2;
}
.box > :nth-child(2) {
padding: 2px 8px;
border-radius: 8px;
background: linear-gradient(90deg, #88d1c7, #eaac3a);
box-decoration-break: clone;
}コントロール
box-decoration-breakChrome・Edge・Firefox が対応（Safari は -webkit- を付けた名前で、インラインの要素にだけ効きます）clone
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
解説
値の意味
slice：初期値です。分かれる前の 1 つの箱として描いてから、区切りで切ったように見えます。分かれた所には枠線も内側の余白も付かず、角丸は箱の両端にだけ付き、背景（グラデーションなど）は区切りをまたいでつながります。clone：分かれた一つひとつに、枠線・内側の余白・角丸・影を付けて描きます。背景も、それぞれの中で描き直されます。
使いどころ
背景色と角丸で目立たせた語が行をまたぐときに、行ごとに丸く閉じた形にしたい場合に使います。
気をつけること
- Safari は
-webkit-box-decoration-breakと接頭辞を付けた名前でだけ対応し、効くのはインラインの要素だけです。Chrome・Edge は 130 から接頭辞なしで対応しています。 - 段組み（
column-countなど）や印刷のページで分かれたブロックの要素にも効きます（Safari を除く）。
このページのプレビューでは、補助の宣言で行の間を広げ（line-height: 2）、行をまたぐ span（2 番目の子）に内側の余白（padding: 2px 8px）、角丸（border-radius: 8px）、左から右へのグラデーションの背景を付けています。slice ではグラデーションが行をまたいで 1 本につながり、clone では行ごとに両端が丸く閉じて、グラデーションも行ごとに最初から描かれます。