overflow-clip-margin

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The overflow-clip-margin CSS property determines how far outside its bounds an element with overflow: clip may be painted before being clipped.

Syntax

overflow-clip-margin: 20px;
overflow-clip-margin: 1em;

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

The overflow-clip-margin property is specified as a length, negative values are not allowed.

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
Animation typediscrete

Formal syntax

overflow-clip-margin = 
<visual-box> ||
<length [0,∞]>

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

Examples

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

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

Result

Specifications

Specification
Unknown specification
# overflow-clip-margin

Browser compatibility

BCD tables only load in the browser

See also