The clip-path property defines the visible region of an image.
The region is clipped with a given path or SVG element.
The region inside the path is visible; the rest is not.
An image clipped with a circular clip-path.
<style>
.clipped {
clip-path: circle(50%);
height: 350px;
}
</style>
<img src="/img/css/the-bedroom.jpg"
alt="Van Gogh Bedroom"
class="clipped" />
The clip-path property clips (or crops) an element.
The clipping path is a basic shape or SVG source.
This property replaces the obsolete clip property.
clip-path: clip-source | basic-shape | margin-box |
border-box | padding-box | content-box |
fill-box | stroke-box | view-box | none;
| Value | Description |
|---|---|
none |
Default. No clipping will be applied. |
| basic-shape | Clips an element to a basic shape: circle, ellipse, polygon or inset |
margin-box |
Uses margin as reference box |
border-box |
Uses border as reference box |
padding-box |
Uses padding as reference box |
content-box |
Uses content as reference box |
fill-box |
Uses object bounding box as reference box |
stroke-box |
Uses stroke as reference box |
clip-source |
Sets URL to an SVG element |
view-box |
Uses SVG viewport as reference box |
Click the buttons to see different clip-path options.
clip-path: ellipse(50% 30% at 50% 50%)
<style>
.clip-path-example {
clip-path: ellipse(50% 30% at 50% 50%);
height: 350px;
}
</style>
<img src="/img/css/the-bedroom.jpg"
alt="Van Gogh's Bedroom"
class="clip-path-example" />
<p id="text">clip-path: ellipse(50% 30% at 50% 50%)</p>
This table shows when clip-path support started for each browser.
 Chrome
|
55.0 | Dec 2016 |
 Firefox
|
54.0 | Jun 2017 |
 IE/Edge
|
12.0 | Jul 2015 |
 Opera
|
42.0 | Dec 2016 |
 Safari
|
9.1 | Mar 2016 |
