overflow-clip-margin

Experimental: This is an experimental technologyCheck 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 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
90

No
See bug 1661582.

No
76
No
90
90

No
See bug 1661582.

64
No
15.0


See also
 Related CSS properties: text-overflow, white-space, overflow, overflow-inline, overflow-x, overflow-y, clip, display
 

Found a problem with this page?

Edit on GitHub
Source on GitHub
Report a problem with this content on GitHub
Want to fix the problem yourself? See our Contribution guide.


Last modified: Aug 28, 2022, by MDN contributors


    
{'path': 'public/docs/css/overflow-clip-margin.html', 'source': 'DevDocs.IO'}