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
90	90	102	76	x

Tablets / Mobile
90	102	64	x	15	90

Last updated by CSSPortal on: 31st December 2023