CSS - clip Property

Quiz

CSS clip property is used to create a clipping region for an element, which defines the visible area of the element. Only the specified region will be visible and other regions will be hidden. The clip property only applies to elements with absolute or fixed positioning.

Syntax

clip: auto | shape | initial | inherit;

Property Values

Value	Description
auto	No clipping will be applied to the element. Default value.
shape	It clips an element. The only value possible is rect(top, right, bottom, left).
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Clip Property

The following examples explain the clip property with different values.

Clip Property with Auto Value

To not clip an absolute or fixed positioned element, so that the entire element is visible, we use the auto value of the clip porperty. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .sample {
         width: 200px;
         background-color: lightblue;
         padding: 10px;
      }

      .clip-rect {
         position: absolute;
         width: 200px;
         background-color: lightblue;
         padding: 10px;
         clip: auto;
      }
   </style>
</head>

<body>
   <h2>
   CSS clip property
   </h2>
   <p>
      Original text:
   </p>
   <div class="sample">
      TutorialsPoint is an educational platform offering 
      a vast array of tutorials and resources across various
      subjects, including programming, web development, and
      technology. It aims to provide accessible and 
      comprehensive learning materials for learners 
      of all levels globally.
   </div>
   <br/>
   <p>
      Clip: auto value
   </p>
   <div class="clip-rect">
      TutorialsPoint is an educational platform offering
      a vast array of tutorials and resources across various
      subjects, including programming, web development,
      and technology. It aims to provide accessible and
      comprehensive learning materials for learners of
      all levels globally.
   </div>
   <br/>
</body>

</html>

Clip Property with rect() Value

To clip portion of an absolute or fixed positioned element such that only the specified region is visible and remaining region is not visible, we use the rect(top, right, bottom, left) value of the clip property. The specified value will clip the element from the top and left edges. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .sample {
         width: 200px;
         background-color: lightgreen;
         padding: 10px;
      }

      .clip-rect {
         position: absolute;
         width: 200px;
         background-color: lightgreen;
         padding: 10px;
         clip: rect(0px 170px 140px 0px);
      }
   </style>
</head>

<body>
   <h2>
      CSS clip property
   </h2>
   <p>
      Original text:
   </p>
   <div class="sample">
      TutorialsPoint is an educational platform offering
      a vast array of tutorials and resources across various
      subjects, including programming, web development, 
      and technology. It aims to provide accessible and
      comprehensive learning materials for learners
      of all levels globally.
   </div>
   <br/>
   <p>
      Clip: rect(0px 170px 140px 0px) value
   </p>
   <div class="clip-rect">
      TutorialsPoint is an educational platform
      offering a vast array of tutorials and resources
      across various subjects, including programming,
      web development, and technology. It aims to provide
      accessible and comprehensive learning materials
      for learners of all levels globally.
   </div>
   <br/>
</body>

</html>

Clip Property with Images

The clip property can also be used with absolute or fixed positioned images. In the following example, auto and rect(top, right, bottom, left) values have been used with the image.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      img {
         width: 300px;
         height: 200px;
      }

      .clip-auto {
         position: absolute;
         clip: auto;
      }

      .clip-rect {
         position: absolute;
         clip: rect(0px 140px 170px 0px);
      }
   </style>
</head>

<body>
   <h2>
      CSS clip property</h2>
   <p>Original image:</p>
   <img src="/css/images/white-flower.jpg" 
   />
   <p>
      clip: auto value
   </p>
   <img src="/css/images/white-flower.jpg" 
   />
   <p>
      clip: rect(0px 140px 170px 0px) value
   </p>
   <img src="/css/images/white-flower.jpg" class="clip-rect" 
   />

</body>

</html>

Note:

The clip property is deprecated and replaced by clip-path property
The clip property will not work if 'overflow: visible'

Supported Browsers

Property
clip	1.0	8.0	1.0	1.0	7.0

css_reference.htm

Print Page