clip-path

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

Syntax

Example:

img.ex {
  clip-path: ellipse(60%);
}

Values

clip-source
Specifies a URL to an SVG <clipPath> element.

basic-shape
Clips the element to a basic shape (circle, ellipse, polygon, or inset).

margin-box
The margin box is used as the reference box.

border-box
The border box is used as the reference box.

padding-box
The padding box is used as the reference box.

content-box
The content box is used as the reference box.

fill-box
The object bounding box is used as the reference box.

stroke-box
The stroke bounding box is used as the reference box.

view-box
The SVG viewport is used as the reference box.

none
Default value. No clipping on the element is performed.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of clip-path? Submit a codepen.io demo and we'll showcase it here ↴