CSS clip-path Property
CSS clip-path property is used for creating a clipping region that is known to set which part of any element must be shown. Parts inside the region are shown while the parts outside the region are hidden.
Note: A specific computed value other than the none value, results in the creation of a new stacking context in a similar way just like the CSS opacity does for the values other than 1.
Syntax for the clip-path Property
Following is the syntax for the clip-path property.
clip: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none|initial|inherit;
Example: CSS clip-path Property
Here in the example below, we are using the clip-path property using shapes, with different border colors, and their different values. In this case, we have given the clip-path value as 'cross'. The CSS styling is done inside the opening and closing head tags of the HTML.
<!DOCTYPE html>
<html>
<head>
<title>The clip-path property in CSS</title>
<style type="text/css">
#clipped {
margin-bottom: 20px;
clip-path: url(#cross);
}
</style>
</head>
<body>
<img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN logo">
<svg height="0" width="0">
<defs>
<clipPath id="cross">
<rect y="110" x="137" width="90" height="90" />
<rect x="0" y="110" width="90" height="90" />
<rect x="137" y="0" width="90" height="90" />
<rect x="0" y="0" width="90" height="90" />
</clipPath>
</defs>
</svg>
<select id="clipPath">
<option value="none">none</option>
<option value="circle(100px at 110px 100px)">circle</option>
<option value="url(#cross)" selected>cross</option>
<option value="inset(20px round 20px)">inset</option>
<option value="path('M 0 200 L 0,110 A 110,90 0,0,1 240,100 L 200 340 z')">path</option>
</select>
</body>
</html>
Output:
Example 2: CSS clip-path Property
Here in the example below, we are using the clip-path property using shapes, with different border colours, and their different values. In this case, we have given the clip-path value as 'polygon(...)'. Hence, we get the desired result as the first image and as we hover over the image, we get the next image as the result.
<!DOCTYPE html>
<html>
<head>
<title>clip-path property in CSS</title>
<style type="text/css">
.clip-borders {
width: 100px;
height: 100px;
background-color: #639;
background: rebeccaPurple;
border: 4px solid #222;
margin: 0 auto;
-webkit-clip-path: polygon(0% 100%, 30% 0%, 100% 0%, 70% 100%);
clip-path: polygon(0% 100%, 30% 0%, 100% 0%, 70% 100%);
-webkit-clip-path: url("#rhomboid-clip");
clip-path: url("#rhomboid-clip");
}
.clip-borders:hover {
-webkit-clip-path: none;
clip-path: none;
}
</style>
</head>
<body>
<div class="clip-borders"></div>
<svg class="clip-svg">
<defs>
<clipPath id="rhomboid-clip" clipPathUnits="objectBoundingBox">
<polygon points="0 1, 0.3 0, 1 0, 0.7 1" />
</clipPath>
</defs>
</svg>
</body>
</html>
Output:
Live example
Here in this live example, you can easily test the live coding and execute the example using different values or edit the coding and create your own example.
Browser Compatibility
There are many browsers which do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
55 |
55 |
| Edge |
12 |
12 |
| Firefox |
3.5 |
3.5 |
| Internet Explorer |
10 |
10 |
| Opera |
42 |
42 |
| Safari |
9.1 |
9.1 |
| Webview Android |
55 |
55 |
| Chrome Android |
55 |
55 |
| Firefox Android |
4 |
4 |
| Opera Android |
42 |
42 |
| IOS Safari |
9.3 |
9.3 |
| Samsung Internet |
6.0 |
6.0 |
Conclusion
The initial value for the clip-path property in CSS is none. This property is applicable to all elements and in SVG. It is not an inherited property. The percentages value refer to the reference box when it is specified or else it refers to the border-box. The computed value for this property is the as specified one but in the case of the URL() values, it is absolute.
