This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.


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 valuenone
Applies toall elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements
Percentagesas specified
Computed valueas specified, but with url values made absolute
Animatableyes, as specified for <basic-shape>, otherwise no
Canonical orderthe unique non-ambiguous order defined by the formal grammar


/* Keyword values */
clip-path: none;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;

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

/* 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%);

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


Represents a URL referencing a clip path element.
A basic shape function as defined in the CSS Shapes specification. A basic shape makes use of the specified reference box to size and position the basic shape. If no reference box is specified, the border-box will be used as reference 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.


Uses the object bounding box as reference box.


Uses the stroke bounding box as reference 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.

There is no clipping path created.

Formal syntax

<clip-source> | [ <basic-shape> || <geometry-box> ] | none

<clip-source> = <url>
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box

<inset()> = inset( <shape-arg>{1,4} [round <border-radius>]? )
<circle()> = circle( [<shape-radius>]? [at <position>]? )
<ellipse()> = ellipse( [<shape-radius>{2}]? [at <position>]? )
<polygon()> = polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
<shape-box> = <box> | margin-box

<shape-arg> = <length> | <percentage>
<shape-radius> = <length> | <percentage> | closest-side | farthest-side
<fill-rule> = nonzero | evenodd
<box> = border-box | padding-box | content-box


/* 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);

Example 1


    .svg-clipped {
        clip-path: url(#svgPath);
        clip-path: url(#svgPath);
<img class="svg-clipped" src="" alt="Rain Drops">
<svg height="0" width="0">
        <clipPath id="svgPath">
            <path fill="#FFFFFF" stroke="#000000" stroke-width="1.5794" stroke-miterlimit="10" d="M215,100.3c97.8-32.6,90.5-71.9,336-77.6
        c-33.5-14.5-132.5-45.5-95-111.1C125.9,246.6,98.6,139.1,215,100.3z" />



Specification Status Comment
CSS Masking 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

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support ? ? No support ? ?
HTML elements 24-webkit[1] 3.5 (1.9.1) No support (Yes)-webkit[1] ?
<basic-shape> ? 47 (47) (behind layout.css.clip-path-shapes.enabled pref) No support ? ?
SVG content ? No support[2] No support ? ?
inset() ? No support[3] No support ? ?
Animations ? 49 (49) No support ? ?
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? ? No support ? ?
HTML elements ? 1.0 (1.9.1) No support ? ?
<basic-shape> ? 47.0 (47) (behind layout.css.clip-path-shapes.enabled pref) No support ? ?
SVG content ? No support[2] No support ? ?
inset() ? No support[3] No support ? ?
Animations ? 49.0 (49) No support ? ?

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

[2] See bug 1246741.

[3] See bug 1246762.


See also