CSS clip-path Property
The clip-path property allows specifying a clipping region which sets what part of the element should be shown. Those parts outside the clipping region are hidden. This property accepts four value types:
<clip-source><basic-shape><geometry-box>none
The deprecated clip property will be replaced by the clip-path property.
| Initial Value | none |
|---|---|
| Applies to | All elements. |
| Inherited | No |
| Animatable | Yes, if specified for <basic-shape>. |
| Version | CSS Masking Module Level 1 |
| DOM Syntax | object.style.clipPath = "none"; |
Syntax
Syntax CSS clip-path Property
css
clip-path: <clip-source> | <basic-shape> | <geometry-box> | none | initial | inherit | unset;Example of the clip-path property:
Example of CSS clip-path Property with basic-shape value
html
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #eee;
}
.container {
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 200px 200px 200px;
grid-gap: 20px;
justify-content: center;
}
.container div {
background-image: url("https://www.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-position: center;
background-size: cover;
color: #000;
font-size: 18px;
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
.example {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
</style>
</head>
<body>
<h1>Clip-path property example</h1>
<div class="container">
<div class="example">polygon</div>
</div>
</body>
</html>Result
Example of the clip-path property with all the values:
Example of CSS clip-path Property with global and basic-shape values
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #eee;
}
.container {
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 200px 200px 200px;
grid-gap: 20px;
justify-content: center;
}
.container > div {
background-image: url(https://www.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg);
background-position: center;
background-size: cover;
color: #000;
font-size: 18px;
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
.box1 {
clip-path: none;
}
.box2 {
clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);
/* values are from-top, from-right, from-bottom, from-left, and optional round keyword for border-radius */
}
.box3 {
clip-path: circle(50% at 50% 50%);
}
.box4 {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.box5 {
clip-path: ellipse(90px 50px at 100px 100px);
}
.box6 {
clip-path: inherit;
}
.box7 {
clip-path: initial;
}
.box8 {
clip-path: unset;
}
</style>
</head>
<body>
<h2>Clip-path property example</h2>
<div class="container">
<div class="box1">none</div>
<div class="box2">inset</div>
<div class="box3">circle</div>
<div class="box4">polygon</div>
<div class="box5">ellipse</div>
<div class="box6">inherit</div>
<div class="box7">initial</div>
<div class="box8">unset</div>
</div>
</body>
</html>Values
| Value | Description |
|---|---|
<clip-source> | The <url> referencing an SVG <clipPath> element. |
<basic-shape> | A basic shape function such as circle(), ellipse(), inset(), or polygon(). Can be combined with a <geometry-box> using a slash (/). |
<geometry-box> | Defines the reference box for the basic shape (e.g., border-box, padding-box, content-box, margin-box). |
| none | Clipping path is not created. |
Note: initial, inherit, and unset are global CSS values and can be used with any property.
Practice
What does the CSS clip-path property do?