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.
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: 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
<visual-box> || <length [0,∞]>
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
BCD tables only load in the browser
See also
- Related CSS properties:
text-overflow
,white-space
,overflow
,overflow-inline
,overflow-x
,overflow-y
,clip
,display