overflow-clip-margin
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Theoverflow-clip-marginCSS property determines how far outside its bounds an element withoverflow: clip may be painted before being clipped. The bound defined by this property is called theoverflow 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 topadding-box, specifies the box edge to use as the overflow clip edge origin. The<length> value specified inoverflow-clip-margin must be nonnegative.
Note:If the element does not haveoverflow: clip then this property will be ignored.
Formal definition
| Initial value | 0px |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Computed value | the computed <length> and a <visual-box> keyword |
| Animation type | discrete |
Formal syntax
overflow-clip-margin =
<visual-box>||
<length [0,∞]>
<visual-box> =
content-box|
padding-box|
border-box
Examples
HTML
html
<div> 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
Loading…
See also
- Related CSS properties:
text-overflow,white-space,overflow,overflow-inline,overflow-x,overflow-y,clip,display