overflow-clip-margin

overflow-clip-margin は、overflow: clip の箱で、はみ出した中身をどこで切るかを決めます。箱の枠より少し外まで描かせて、影や飾りが途中で切れないようにするときに使います。

構文

<visual-box> || <length [0,∞]>
<visual-box> = content-box | padding-box | border-box

Open https://example.com/a/very/long/path to see more. The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。きのうは雨でしたが、けさはよく晴れています。

プリセット

右下の角をドラッグするとサイズを変えられます

.box {
  overflow: clip;
  border: 8px dashed rgb(31 41 55 / 0.3);
  overflow-clip-margin: 32px;
}

<visual-box>padding-box

border-boxpadding-boxcontent-box

<length>32px

content-box・padding-box・border-box：どの枠を基準に切るかです。省くと padding-box（内側の余白の外側、枠線の内側）です。
長さ：基準の枠からどれだけ外まで描かせるかです。省くと 0 です。負の値や % は書けません。
2 つは順不同で、片方だけでも書けます。初期値は 0px で、枠線の内側でぴったり切ります。

プレビューでは、箱に overflow: clip と点線の枠線を付け、箱に入りきらない長い文章を入れています。長さを足すと、文章が枠線を越えて外まで描かれます。

overflow: clip で中身を箱に収めつつ、項目の影やフォーカスの輪郭（outline）のように少しだけ外へ出るものは切りたくないときに、その分だけ外へ広げます。overflow: hidden と違ってスクロールできる箱にならないので、position: sticky の邪魔もしません。

効くのは overflow が clip の箱（と contain: paint の箱）だけです。hidden や auto の箱では何も変わりません。Chrome では、横と縦の両方が clip のときだけ効きます。
切る線の角は、箱の border-radius に合わせて丸くなります。
長さは Chrome・Edge 90、Firefox 102 から、基準の枠を選ぶキーワードは Chrome・Edge 104、Firefox 148 から使えます。Safari はまだ対応していません。
仕様の新しい草案では、負の値で枠の内側へ縮めることも書けるようになっていますが、Chrome はまだ受け付けません。