Atributo clip-path CSS
Definition and usage
The clip-path property allows you to clip an element to a basic shape or SVG source.
Note:clip-path will replace the deprecated clip attribute.
CSS syntax
clip-path: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none;
Attribute value
| Value | Description |
|---|---|
| clip-source | Define the URL pointing to the SVG <clipPath> element. |
| basic-shape | Clip the element to a basic shape: circle, ellipse, polygon, or star. |
| margin-box | Use the margin box as the reference box. |
| border-box | Use the border box as the reference box. |
| padding-box | Use the padding box as the reference box. |
| content-box | Use the content box as the reference box. |
| fill-box | Use the object bounding box as the reference box. |
| stroke-box | Use the stroke bounding box as the reference box. |
| view-box | Use the SVG viewport as the reference box. |
| none | Default value. No clipping path is created. |
Technical details
| Default value: | none |
|---|---|
| Inheritance: | No |
| Animation production: | Supported (only for basic-shape value). See also:Animation-related properties. |
| Version: | CSS Masking Module Level 1 |
| JavaScript syntax: | object.style.clipPath="circle(50%)" |
Browser support
The numbers in the table indicate the first browser version that fully supports this property.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 55.0 23.0 -webkit- |
79.0* | 54.0 | 9.1 6.1 -webkit- |
42.0 15.0 -webkit- |
Edge only supports clip-path on SVG elements (does not support HTML elements).
