CSS clip-path Property

Clip an image to a 50% circle:

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

Definition and Usage

The clip-path property lets you clip an element to a basic shape or to an SVG source.

Note: The clip-path property will replace the deprecated clip property.

Default value:	none
Inherited:	no
Animatable:	yes for basic-shape. Read about animatable Try it
Version:	CSS Masking Module Level 1
JavaScript syntax:	object.style.clipPath="circle(50%)" Try it

The numbers in the table specify the first browser version that fully 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-

* Before version 79, Edge only supported clip-path on SVG elements (not HTML elements).

Value	Description	Demo
clip-source	Defines a URL to an SVG <clipPath> element
basic-shape	Clips an element to a basic shape: circle, ellipse, polygon or inset	Demo ❯
margin-box	Uses the margin box as the reference box
border-box	Uses the border box as the reference box
padding-box	Uses the padding box as the reference box
content-box	Uses the content box as the reference box
fill-box	Uses the object bounding box as reference box
stroke-box	Uses the stroke bounding box as reference box
view-box	Uses the SVG viewport as reference box
none	This is default. No clipping is done
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit