CSS clip-path Property

Example

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.
Version:	CSS Masking Module Level 1
JavaScript syntax:	object.style.clipPath="circle(50%)"

• Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
• object - object in javascript means the element on which clip-path is applied.
• Animatable - "Animatable = yes" means that it can be animated with CSS @keyframes.

Browser Support

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

CSS Syntax

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

Property Values

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
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.
inherit	Inherits this property from its parent element.