W3cubDocs

overflow-clip-margin

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

/* <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 value	`0px`
Applies to	all elements
Inherited	no
Computed value	the computed
Animation type	discrete

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
CSS Overflow Module Level 3 # overflow-clip-margin

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`overflow-clip-margin`	90 Only works when both axes are using `overflow: clip`. See bug 1354474.	90 Only works when both axes are using `overflow: clip`. See bug 1354474.	102 Only supports using a length, not a visual box. See bug 1661582.	No	76 Only works when both axes are using `overflow: clip`. See bug 1354474.	No	90 Only works when both axes are using `overflow: clip`. See bug 1354474.	90 Only works when both axes are using `overflow: clip`. See bug 1354474.	102 Only supports using a length, not a visual box. See bug 1661582.	64 Only works when both axes are using `overflow: clip`. See bug 1354474.	No	15.0 Only works when both axes are using `overflow: clip`. See bug 1354474.