clip-path

The clip-path CSS property prevents a portion of an element from getting displayed by defining a clipping region to be displayed i.e, only a specific region of the element is displayed. The clipping region is a path specified as a URL referencing an inline or external SVG, or shape method such as circle(). The clip-path property replaces the now deprecated clip property.

Initial value	none
Applies to	all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements
Inherited	no
Percentages	as specified
Media	visual
Computed value	as specified, but with url values made absolute
Animation type	yes, as specified for <basic-shape>, otherwise no
Canonical order	the unique non-ambiguous order defined by the formal grammar

Syntax

/* Keyword values */
clip-path: none;

/* Image values */ 
clip-path: url(resources.svg#c1);

/* Box values */
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;

/* Geometry values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

/* Box and geometry values combined */
clip-path: padding-box circle(50px at 0 100px);

/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: unset;

Values

url()

Represents a URL referencing a clip path element.

inset(), circle(), ellipse(), polygon()

A <basic-shape> function. Such a shape will make use of the specified <geometry-box> to size and position the basic shape. If no geometry box is specified, the border-box will be used as reference box.

<geometry-box>

If specified in combination with a <basic-shape>, it provides the reference box for the basic shape. If specified by itself, it uses the edges of the specified box including any corner shaping (e.g. defined by border-radius) as clipping path. The geometry box can be one of the following values:

fill-box

Uses the object bounding box as reference box.

stroke-box

Uses the stroke bounding box as reference box.

view-box

Uses the nearest SVG viewport as 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 reference box is set to the width and height values of the viewBox attribute.

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.

none

There is no clipping path created.

Formal syntax

<clip-source> | [ <basic-shape> || <geometry-box> ] | none
where 
<clip-source> = <url>
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box
where 
<inset()> = inset( <length-percentage>{1,4} [ round <border-radius> ]? )
<circle()> = circle( [ <shape-radius> ]? [ at <position> ]? )
<ellipse()> = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
<polygon()> = polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
<shape-box> = <box> | margin-box
where 
<length-percentage> = <length> | <percentage>
<shape-radius> = <length-percentage> | closest-side | farthest-side
<position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]
<fill-rule> = nonzero | evenodd
<box> = border-box | padding-box | content-box

Examples

/* inline SVG  */
.target {
  clip-path: url(#c1);
}

/* external SVG */
.anothertarget {
  clip-path: url(resources.svg#c1);
}

/* circle */
.circleClass {
  clip-path: circle(15px at 20px 20px);
}

Live sample

HTML

<img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
    alt="MDN logo">
<svg height="0" width="0">
  <defs>
    <clipPath id="cross">
      <rect y="110" x="137" width="90" height="90"/>
      <rect x="0" y="110" width="90" height="90"/>
      <rect x="137" y="0" width="90" height="90"/>
      <rect x="0" y="0" width="90" height="90"/>
    </clipPath>
  </defs>
</svg>

<select id="clipPath">
  <option value="none">none</option>
  <option value="circle(100px at 110px 100px)">circle</option>
  <option value="url(#cross)" selected>cross</option>
  <option value="inset(20px round 20px)">inset</option>
</select>

CSS

#clipped {
  margin-bottom: 20px;
  clip-path: url(#cross);
}

Result

Specifications

Specification	Status	Comment
CSS Masking Module Level 1 The definition of 'clip-path' in that specification.	Candidate Recommendation	Extends its application to HTML elements
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'clip-path' in that specification.	Recommendation	Initial definition (applies to SVG elements only)

Browser compatibility

[1] Chrome and Opera currently don't support external SVGs.

[2] Edge doesn't support this feature yet. This is requested on the Edge User Voice page. See also the Edge Development page.

[3] Safari doesn't support this feature yet. See WebKit bug 126207.

[4] Internet Explorer and Edge currently only support clip paths defined via url().

[5] This feature is implemented behind the preference layout.css.clip-path-shapes.enabled, defaulting to false. Basic shapes except inset() got implemented in bug 1075457, inset() got implemented in bug 1246762. Since Gecko 53 (Firefox 53.0 / Thunderbird 53.0 / SeaMonkey 2.50) the preference defaults to true on Nightly and Developer Edition (bug 1303654).

[6] This feature got implemented in bug 1246741.

[7] Before Firefox 51, fill-box and stroke-box where aliases for border-box.

See also

• clip-rule, mask, filter
• Applying SVG effects to HTML content
• clip-path SVG attribute