CSS overflow-clip-margin Property

Description

The overflow-clip-margin CSS property determines how far the overflow of an element can go beyond the element's box before being clipped. This area is called the overflow clip edge. The overflow-clip-margin property is only relevant when the overflow property is set to clip. This value clips the element's content to the element's padding box. The overflow clip edge is then extended by the value of the overflow-clip-margin property. For example, if the overflow-clip-margin property is set to 10px, the overflow of the element will be allowed to extend 10px beyond the element's padding box in all directions before being clipped.

Initial value
0px
Applies to
all elements
Inherited
no
Computed value
the computed <length> and a <visual-box> keyword
Animatable
discrete
JavaScript syntax
object.style.overflowClipMargin

Syntax

overflow-clip-margin: <visual-box> | <length>

Values

  • <visual-box>Specifies the box edge to use as the overflow clip edge origin.
  • <length>Specifies the length, must be nonnegative.

Example

<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>
.box {
  border: 3px solid black;
  width: 250px;
  height: 100px;
  overflow: clip;
  overflow-clip-margin: 20px;
}

Browser Support

The following table will show you the current browser support for the CSS overflow-clip-margin property.

Desktop
Edge Chrome Firefox Opera Safari
909010276x
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
9010264x1590

Last updated by CSSPortal on: 31st December 2023