CSS clip-path Property
CSS's clip-path property is used to clip a specific section of an image so that part of the image inside the section is visible and part of the image outside the section is not visible.
Syntax
Property Values
| Value | Description |
|---|---|
| clip-source | Specifies a URL to an SVG element. |
| basic-shape | Clips an element to one of the following basic shapes: circle, ellipse, polygon, or inset |
| margin-box | The margin box is used as the reference box. |
| border-box | The border box is used as the reference box. |
| padding-box | The padding box is used as the reference box. |
| content-box | The content box is used as the reference box. |
| fill-box | As a reference box, the object bounding box is used. |
| stroke-box | As a reference box, the stroke bounding box is used. |
| view-box | The SVG viewport is used as a reference box. |
| none | This is the default setting. There is no clipping. |
| initial | This property is set to its default value. |
| inherit | This property is inherited from its parent element. |
Supported Browsers
| Element | Chrome | Firefox | Safari | Edge / IE | Opera |
|---|---|---|---|---|---|
| clip-path |
55.0
23.0 -webkit- |
54.0 |
9.1
6.1 -webkit- |
79.0 |
42.0
15.0 -webkit- |