The clip-path CSS property creates a clipping region that defines what part of an element should be displayed. Those portions that are inside the region are shown, while those outside are hidden. The clipping region is a path specified either as a URL referencing inline or external SVG, or as a shape, such as a circle().

Historical Note: The clip-path property replaced the deprecated clip property.

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

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 refer to reference box when specified, otherwise border-box
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


The clip-path property is specified as one or a combination of the values listed below.


Represents a URL referencing a clipping path element.
inset(), circle(), ellipse(), polygon()
A <basic-shape> function. The size and position of the shape is defined by the <geometry-box> value. If no geometry box is specified, the border-box will be used as the reference box.
If specified in combination with a <basic-shape>, 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:
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.
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.
No clipping path is 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( <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

<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


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

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

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

Live sample


<img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
    alt="MDN logo">
<svg height="0" width="0">
    <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"/>

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


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



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

Feature Chrome Edge Firefox Internet Explorer Opera Safari
Basic support


24 -webkit-

No 3.5 No 42 No
On SVG elements 55 151 52 Yes2 42 No
<basic-shape> 55 No


47 —?3

No 42 No
inset() 55 No



No 42 No
Animations 55 No 49 No 42 No
fill-box and stroke-box No No 514 No No No
Feature Android webview Chrome for Android Edge mobile Firefox for Android Opera Android iOS Safari Samsung Internet
Basic support 55


Yes -webkit-

No 4 42 No ?
On SVG elements 55 55 121 52 42 No ?
<basic-shape> 55 55 No


47 —?3

42 No ?
inset() 55 55 No



42 No ?
Animations 55 55 No 49 42 No ?
fill-box and stroke-box No No No 514 ? No ?

1. Edge only supports clip paths defined by url().

2. Internet Explorer only supports clip paths defined by url().

3. From version 47: this feature is behind the layout.css.clip-path-shapes.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

4. This value was supported before Firefox 51, but as an alias to border-box.

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.