CSS clip-path Property

February 10, 2021 12:37 pm IST

You are Here:

CSS clip-path Property

CSS clip-path property creates a clipping region that sets what part of an element should be shown.

Note: Parts that are inside the region are shown, while those outside are hidden.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> img{ width: 350px; height: 200px; background-color: #fff; margin-right: 1em; object-fit: fill; } #point{ clip-path: circle(35%); } #point1{ clip-path: ellipse(130px 140px at 10% 20%); } #point2{ clip-path: inset(10% 52% 0px 27px); } #point3{ clip-path: polygon(50% 20%, 90% 80%, 10% 80%);; } </style> </head> <body> <h1>CSS clip-path Property</h1> <h2>clip-path: circle(35%);</h2> <img id="point" src="emotion.jpg"> <h2>clip-path: ellipse(130px 140px at 10% 20%);</h2> <img id="point1" src="emotion.jpg"> <h2>clip-path: inset(10% 52% 0px 27px);</h2> <img id="point2" src="emotion.jpg"> <h2>clip-path: polygon(50% 20%, 90% 80%, 10% 80%);</h2> <img id="point3" src="emotion.jpg"> </body> </html>

Run

Syntax

Using CSS

element{ clip-path: inset(10% 52% 0px 27px); }

Using Javascript

object.style.clipPath="inset(10% 52% 0px 27px)";

Animatable

Yes, clip-path property is animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS clip-path property is none.

Property Value

The following table provides a list of values for CSS clip-path property.

Value	Explanation
clip-source	A url referencing an SVG clipPath element.
basic-shape	Specifies a basic shape to be used. Possible shapes are inset() circle() ellipse() polygon() path()
geometry-box	Specifies a geometry-box to be used. Possible boxes are. margin-box border-box padding-box content-box fill-box stroke-box view-box
none	No clipping path is created.

Using JavaScript

In the following example, we will demonstrate how to change the CSS clip-path property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> img{ width: 350px; height: 200px; background-color: #fff; clip-path: inset(10% 52% 0px 27px); } button{ display: block; } </style> </head> <body> <h1>CSS clip-path Property</h1> <img src="emotion.jpg"> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("img")[0]; function myFunction(){ x.style.clipPath = "inset(10% 9% 0px 175px)"; } </script> </body> </html>

Run