CSS - overflow-clip-margin Property

CSS overflow-clip-margin property specifies the distance that content can overflow the element's box before being clipped. This distance is called the overflow clip margin.

Possible Values

<length> − Length in pixel or em (relative to the font size of the element). The offset specifies how far the overflow clip edge is extended from the chosen box edge. Default e value is set to zero. Negative values are invalid.
<visual-box> − When the specified offset is zero, the visual box specifies the box edge to be used as the overflow clip edge origin. If omitted, the elements padding-box is used as the default. (Values can be - content-box | padding-box | border-box )

Applies to

All the HTML elements.

Syntax

overflow-clip-margin: length in px | length in em | content-box | padding-box | border-box;

CSS overflow-clip-margin - <length> Value

We can set overflow-clip-margin property to a length value, such as px or em. This length value specifies how far outside the element's box the content can be painted before being clipped.

<html>
<head>
<style>
   .container {
      display: flex;
   }
   .overflow-px {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 250px;
      height: 150px;
      overflow: clip;
      overflow-clip-margin: 30px;
      margin-right: 100px;
   }
   h4 {
      text-align: center;
      color: #D90F0F;
   }
   .overflow-em {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 250px;
      height: 150px;
      overflow: clip;
      overflow-clip-margin: 2em;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="overflow-px">
         <h4>Tutorialspoint CSS Overflow-clip-margin</h4>
         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
         standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
         make a type specimen book.</p>
      </div>
      <div class="overflow-em">
         <h4>Tutorialspoint CSS Overflow-clip-margin</h4>
         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
         make a type specimen book.</p>
      </div>
   </div>
</body>
</html>

CSS overflow-clip-margin - <visual-box> Value

The following example sets the overflow-clip-margin property of an element to 30 pixels from the content box. The content box is the area inside the element's content, excluding any padding or border −

<html>
<head>
<style>
   .overflow {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 250px;
      height: 150px;
      overflow: clip;
      overflow-clip-margin: content-box 30px;
      margin-right: 100px;
   }
   h4 {
      text-align: center;
      color: #D90F0F;
   }
</style>
</head>
<body>
   <div class="overflow">
      <h4>Tutorialspoint CSS Overflow-clip-margin</h4>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
      make a type specimen book.</p>
   </div>
</body>
</html>