CSS - clip-path Property

Quiz

CSS clip-path property is used to define a clipping region for an element. The clipping region determines which parts of the element are visible and which are hidden, creating visual effects by masking portions of an element.

Syntax

clip: path | basic-shape | margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | none | initial | inherit;

Property Values

Value	Description
path	It defines a URL to an SVG <clipPath> element.
basic shape	It clips an element some basic shape such as circle, ellipse, polygon or inset.
margin-box	It uses the margin box as the reference box.
border-box	It uses the border box as the reference box.
padding-box	It uses the padding box as the reference box.
content-box	It uses the content box as the reference box.
fill-box	It uses the fill box as the reference box.
stroke-box	It uses the stroke box as the reference box.
view-box	It uses the view box as the reference box.
none	No clipping is done on the element. Default.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Clip Path Property

The following examples explain the clip-path property with different values.

Clip Path Property with SVG Path

To perform clipping on an element, we can specify the clipping shape using SVG. The definitions of the shape are specified using the tag <clipPath> with which custom clipping shapes can be made. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      #clip-img {
         clip-path: url("#clip-img")
      }
   </style>
</head>

<body>
   <h2>
      CSS clip-path property
   </h2>
   <h4>
      clip-path: url("#clip-img")
   </h4>
   <svg height="0" width="0">
   <clipPath id="clip-img">
      <rect y="44" x="120" width="80" height="80" />
      <rect x="40" y="120" width="80" height="80" />
      <rect x="120" y="200" width="80" height="80" />
      <rect x="1900" y="120" width="80" height="80" />
   </clipPath>
</svg>
   <img id="clip-img" height="200" 
   width="200" src="/css/images/content.png">
   <h4>
      Image used:
   </h4>
   <img height="150" width="150" 
   src="/css/images/content.png">
</body>

</html>

Clip Path Property with Basic Shapes

To perform clipping on an element, we can specify the clipping shape to the clip-path property. Some commonly used shapes include circle(), ellipse(), polygon(), inset() etc. The dimensions of these shapes can be provided as arguments. These shapes have been used in the following example.

Examples

<!DOCTYPE html>
<html>

<head>
   <style>
      .image-container {
         display: flex;
      }

      .dimensions {
         width: 200px;
         height: 200px;
      }

      .clip-inset {
         clip-path: inset(10% 10% 10% 10% round 10% 10% 10% 10%);
      }

      .clip-circle {
         clip-path: circle(50%);
      }

      .clip-ellipse {
         clip-path: ellipse(100px 50px at 100px 100px);
      }

      .clip-ploygon {
         clip-path: polygon(0 50%, 100% 50%, 50% 100%, 50% 0);
      }

   </style>
</head>

<body>
   <h2>
      CSS clip-path property
   </h2>
   <h4>
      clip-path: inset(10% 10% 10% 10% 
      round 10% 10% 10% 10%)
   </h4>
   <div class="image-container">
      <img src="/css/images/content.png" 
      class="clip-inset dimensions">
   </div>
   <h4>
      clip-path: circle(50%)
   </h4>
   <div class="image-container">
      <img src="/css/images/content.png" 
      class="clip-circle dimensions">
   </div>
   <h4>
      clip-path: ellipse(100px 50px at 
      100px 100px)
   </h4>
   <div class="image-container">
      <img src="/css/images/content.png" 
      class="clip-ellipse dimensions">
   </div>
   <h4>
      clip-path: polygon(0 50%, 100% 50%, 
      50% 100%, 50% 0)
   </h4>
   <div class="image-container">
      <img src="/css/images/content.png" 
      class="clip-ploygon dimensions">
   </div>
</body>

</html>

Supported Browsers

Property
clip-path	55.0	79.0	3.5	9.1	42.0

css_reference.htm

Print Page