CSS clip-pathProperty
Example
Crop an image, displaying 50% in a circular manner:
img {
clip-path: circle(50%);
}
Try it Yourself »
Property definition and usage notes
The clip-path property uses clipping to create the displayable area of an element. Parts within the area are shown, parts outside are hidden. Specific shapes can be specified.
Note:The clip-path property will replace the deprecated clip property.
| Default Value: | none |
|---|---|
| Inherited: | no |
| animation: | Supported.Read Aboutanimatable Try it Yourself |
| version: | CSS Masking Module Level 1 |
| JavaScript syntax: | object.style.clipPath="circle(50%)" Try it Yourself |
Browser Support
The numbers in the table indicate the first browser version that supports the property.
| Property | |||||
|---|---|---|---|---|---|
| clip-path | 55.0 23.0 -webkit- |
79.0* | 54.0 | 9.1 6.1 -webkit- |
42.0 15.0 -webkit- |
Syntax
clip: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none|initial|inherit;
Property value
| Value | Description |
|---|---|
| clip-source | Use a URL to represent the path of the clipping element |
| basic-shape | Clip the element into basic shapes: circle, ellipse, polygon, or inset |
| margin-box | Using the margin box as the reference box |
| border-box | Using the border box as the reference box |
| padding-box | Using the padding box as the reference box |
| content-box | Using the content box as the reference box |
| fill-box | Using the object bounding box as the reference box |
| stroke-box | Use the stroke bounding box as the reference box |
| view-box | Use the nearest SVG viewport as the reference box. |
| none | This is the default setting. No clipping. |
| initial | Set the property to the default value.Read Aboutinitial |
| inherit | The property value is inherited from the parent element.Read Aboutinherit |