overflow-clip-margin CSS property

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

The overflow-clip-margin CSS property determines how far outside its bounds an element with overflow: clip may be painted before being clipped. The bound defined by this property is called the overflow clip edge of the box.

Syntax

css
/* <length> values */
overflow-clip-margin: 20px;
overflow-clip-margin: 1em;

/* <visual-box> | <length> */
overflow-clip-margin: content-box 5px;

/* Global values */
overflow-clip-margin: inherit;
overflow-clip-margin: initial;
overflow-clip-margin: revert;
overflow-clip-margin: revert-layer;
overflow-clip-margin: unset;

The <visual-box> value, which defaults to padding-box, specifies the box edge to use as the overflow clip edge origin. The <length> value specified in overflow-clip-margin must be nonnegative.

Note: If the element does not have overflow: clip then this property will be ignored.

Formal definition

Initial value0px
Applies toall elements
Inheritedno
Computed valuethe computed <length> and a <visual-box> keyword
Animation typediscrete

Formal syntax

overflow-clip-margin = 
<visual-box> ||
<length>

<visual-box> =
content-box |
padding-box |
border-box

Examples

HTML

html
<div class="box">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur.
</div>

CSS

css
.box {
  border: 3px solid black;
  width: 250px;
  height: 100px;
  overflow: clip;
  overflow-clip-margin: 20px;
}

Result

Specifications

Specification
CSS Overflow Module Level 3
# overflow-clip-margin

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
overflow-clip-margin
Chrome – Partial support
Chrome 90 (Release date: 2021-04-13)
footnote Partial support
footnote Only works when both axes are using overflow: clip. See bug 40235584.
Edge – Partial support
Edge 90 (Release date: 2021-04-15)
footnote Partial support
footnote Only works when both axes are using overflow: clip. See bug 40235584.
Firefox – Full support
Firefox 102 (Release date: 2022-06-28)
footnote Full support
Opera – Partial support
Opera 76 (Release date: 2021-04-28)
footnote Partial support
footnote Only works when both axes are using overflow: clip. See bug 40235584.
Safari – No support
Safari
footnote
footnote See bug 236153
Chrome Android – Partial support
Chrome Android 90 (Release date: 2021-04-13)
footnote Partial support
footnote Only works when both axes are using overflow: clip. See bug 40235584.
Firefox for Android – Full support
Firefox for Android 102 (Release date: 2022-06-28)
footnote Full support
Opera Android – Partial support
Opera Android 64 (Release date: 2021-05-25)
footnote Partial support
footnote Only works when both axes are using overflow: clip. See bug 40235584.
Safari on iOS – No support
Safari on iOS
footnote
footnote See bug 236153
Samsung Internet – Partial support
Samsung Internet 15 (Release date: 2021-08-13)
footnote Partial support
footnote Only works when both axes are using overflow: clip. See bug 40235584.
WebView Android – Partial support
WebView Android 90 (Release date: 2021-04-13)
footnote Partial support
footnote Only works when both axes are using overflow: clip. See bug 40235584.
WebView on iOS – No support
WebView on iOS
footnote
footnote See bug 236153
border-box
Chrome – Full support
Chrome 104 (Release date: 2022-08-02)
footnote Full support
Edge – Full support
Edge 104 (Release date: 2022-08-05)
footnote Full support
Firefox – Full support
Firefox 148 (Release date: 2026-02-24)
footnote Full support
Opera – Full support
Opera 90 (Release date: 2022-08-18)
footnote Full support
Safari – No support
Safari
footnote
footnote See bug 236153
Chrome Android – Full support
Chrome Android 104 (Release date: 2022-08-02)
footnote Full support
Firefox for Android – Full support
Firefox for Android 148 (Release date: 2026-02-24)
footnote Full support
Opera Android – Full support
Opera Android 71 (Release date: 2022-09-16)
footnote Full support
Safari on iOS – No support
Safari on iOS
footnote
footnote See bug 236153
Samsung Internet – Full support
Samsung Internet 20 (Release date: 2023-02-10)
footnote Full support
WebView Android – Full support
WebView Android 104 (Release date: 2022-08-02)
footnote Full support
WebView on iOS – No support
WebView on iOS
footnote
footnote See bug 236153
content-box
Chrome – Full support
Chrome 104 (Release date: 2022-08-02)
footnote Full support
Edge – Full support
Edge 104 (Release date: 2022-08-05)
footnote Full support
Firefox – Full support
Firefox 148 (Release date: 2026-02-24)
footnote Full support
Opera – Full support
Opera 90 (Release date: 2022-08-18)
footnote Full support
Safari – No support
Safari
footnote
footnote See bug 236153
Chrome Android – Full support
Chrome Android 104 (Release date: 2022-08-02)
footnote Full support
Firefox for Android – Full support
Firefox for Android 148 (Release date: 2026-02-24)
footnote Full support
Opera Android – Full support
Opera Android 71 (Release date: 2022-09-16)
footnote Full support
Safari on iOS – No support
Safari on iOS
footnote
footnote See bug 236153
Samsung Internet – Full support
Samsung Internet 20 (Release date: 2023-02-10)
footnote Full support
WebView Android – Full support
WebView Android 104 (Release date: 2022-08-02)
footnote Full support
WebView on iOS – No support
WebView on iOS
footnote
footnote See bug 236153
padding-box
Chrome – Full support
Chrome 104 (Release date: 2022-08-02)
footnote Full support
Edge – Full support
Edge 104 (Release date: 2022-08-05)
footnote Full support
Firefox – Full support
Firefox 148 (Release date: 2026-02-24)
footnote Full support
Opera – Full support
Opera 90 (Release date: 2022-08-18)
footnote Full support
Safari – No support
Safari
footnote
footnote See bug 236153
Chrome Android – Full support
Chrome Android 104 (Release date: 2022-08-02)
footnote Full support
Firefox for Android – Full support
Firefox for Android 148 (Release date: 2026-02-24)
footnote Full support
Opera Android – Full support
Opera Android 71 (Release date: 2022-09-16)
footnote Full support
Safari on iOS – No support
Safari on iOS
footnote
footnote See bug 236153
Samsung Internet – Full support
Samsung Internet 20 (Release date: 2023-02-10)
footnote Full support
WebView Android – Full support
WebView Android 104 (Release date: 2022-08-02)
footnote Full support
WebView on iOS – No support
WebView on iOS
footnote
footnote See bug 236153

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
See implementation notes.

See also