CSS clip-path property

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 property.

Example

Clip the image to a 50% circle:

img {
  clip-path: circle(50%);
}

Try It Yourself

CSS Syntax

clip-path: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none;

Property 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 Creation: 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 to fully support 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 supports clip-path only on SVG elements (not supported on HTML elements).