clip-path

The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.

Initial value none
Applies to all elements; In SVG, it applies to container elements excluding the defs element and all graphics elements

Syntax

  
clip-path: ellipse(130px 140px at 10% 20%);
  

Values

A () referencing an SVG element.
A shape whose size and position is defined by the value. If no geometry box is specified, the border-box will be used as the reference box.
If specified in combination with a , this value defines the reference box for the basic shape. If specified by itself, it causes the edges of the specified box, including any corner shaping (such as a border-radius), to be the clipping path. The geometry box can be one of the following values:
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 the reference box. stroke-box Uses the stroke bounding box as the reference box. view-box Uses the nearest SVG viewport as the reference box. If a viewBox attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the viewBox attribute and the dimension of the size of the reference box is set to the width and height values of the viewBox attribute.
Uses the margin box as the reference box.
Uses the border box as the reference box.
Uses the padding box as the reference box.
Uses the content box as the reference box.
Uses the object bounding box as the reference box.
Uses the stroke bounding box as the reference box.
Uses the nearest SVG viewport as the reference box. If a viewBox attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the viewBox attribute and the dimension of the size of the reference box is set to the width and height values of the viewBox attribute.

Browser support

clip-pathchrome55edge12firefox3.5ie10opera42safari9.1
animationschrome55edge79firefox49ieopera42safari
basic_shapechrome23edge79firefox54ieopera15safari6.1
fill_and_stroke_boxchromeedgefirefox51ieoperasafari
htmlchrome23edge79firefox3.5ieopera15safari6.1
pathchrome88edge88firefox71ieoperasafari13.1
svgchrome23edge12firefox52ie10opera15safari6.1

We use cookies to improve your experience. Learn more in our Privacy policy.

×