clip-path

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

Syntax

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

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

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

/* <basic-shape> values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');

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

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

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

Values

<clip-source>

A <url> referencing a clipping path element.

<basic-shape>

A shape whose size and position is defined by the <geometry-box> value. If no geometry box is specified, the border-box will be used as the reference box.

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

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.

none

No clipping path is created.

Note: A computed value other than none results in the creation of a new stacking context the same way that CSS opacity does for values other than 1.

Formal syntax

<clip-source> | [ <basic-shape> || <geometry-box> ] | nonewhere 
<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 | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<fill-rule> = nonzero | evenodd
<box> = border-box | padding-box | content-box

Example

<svg class="defs">
  <defs>
    <clipPath id="myPath" clipPathUnits="objectBoundingBox">
      <path d="M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z" />
    </clipPath>
  </defs>
</svg>

<div class="grid">
  <div class="col">
    <div class="note">clip-path: none</div>
    <div class="row">
      <div class="cell"> <span>HTML</span>
        <div class="container">
          <p class="none">
            I LOVE<br><em>clipping</em>
          </p>
        </div>
      </div>
      <div class="cell"> <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="none">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: url(#myPath)<br><br>
      Assuming the following clipPath definition:
      <pre>
&lt;svg&gt;
  &lt;clipPath id="myPath" clipPathUnits="objectBoundingBox"&gt;
    &lt;path d="M0.5,1
      C 0.5,1,0,0.7,0,0.3
      A 0.25,0.25,1,1,1,0.5,0.3
      A 0.25,0.25,1,1,1,1,0.3
      C 1,0.7,0.5,1,0.5,1 Z" /&gt;
  &lt;/clipPath&gt;
&lt;/svg&gt;</pre>
    </div>
    <div class="row">
      <div class="cell"> <span>HTML</span>
        <div class="container">
          <p class="svg">
            I LOVE<br><em>clipping</em>
          </p>
        </div>
      </div>
      <div class="cell"> <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="svg">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z')
    </div>
    <div class="row">
      <div class="cell"> <span>HTML</span>
        <div class="container">
          <p class="svg2">
            I LOVE<br><em>clipping</em>
          </p>
        </div>
      </div>
      <div class="cell"> <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="svg2">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>



    <div class="note">clip-path: circle(25%)</div>
    <div class="row">
      <div class="cell"> <span>HTML</span>
        <div class="container">
          <p class="shape1">
            I LOVE<br><em>clipping</em>
          </p>
        </div>
      </div>
      <div class="cell"> <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape1">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell"> <span>HTML</span>
        <div class="container">
          <p class="shape2">
            I LOVE<br><em>clipping</em>
          </p>
        </div>
      </div>
      <div class="cell"> <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape2">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: fill-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell"> <span>HTML</span>
        <div class="container">
          <p class="shape3">
            I LOVE<br><em>clipping</em>
          </p>
        </div>
      </div>
      <div class="cell"> <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape3">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: stroke-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell"> <span>HTML</span>
        <div class="container">
          <p class="shape4">
            I LOVE<br><em>clipping</em>
          </p>
        </div>
      </div>
      <div class="cell"> <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape4">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: view-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell"> <span>HTML</span>
        <div class="container">
          <p class="shape5">
            I LOVE<br><em>clipping</em>
          </p>
        </div>
      </div>
      <div class="cell"> <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape5">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: margin-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell"> <span>HTML</span>
        <div class="container">
          <p class="shape6">
            I LOVE<br><em>clipping</em>
          </p>
        </div>
      </div>
      <div class="cell"> <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape6">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: border-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell"> <span>HTML</span>
        <div class="container">
          <p class="shape7">
            I LOVE<br><em>clipping</em>
          </p>
        </div>
      </div>
      <div class="cell"> <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape7">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: padding-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell"> <span>HTML</span>
        <div class="container">
          <p class="shape8">
            I LOVE<br><em>clipping</em>
          </p>
        </div>
      </div>
      <div class="cell"> <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape8">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: content-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell"> <span>HTML</span>
        <div class="container">
          <p class="shape9">
            I LOVE<br><em>clipping</em>
          </p>
        </div>
      </div>
      <div class="cell"> <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape9">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>
  </div>
</div>

html,body {
  height: 100%;
  box-sizing: border-box;
  background: #EEE;
}

.grid {
  width: 100%;
  height: 100%;
  display: flex;
  font: 1em monospace;
}

.row {
  display: flex;
  flex: 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
}

.col {
  flex: 1 auto;
}

.cell {
  margin: .5em;
  padding: .5em;
  background-color: #FFF;
  overflow: hidden;
  text-align: center;
  flex: 1;
}

.note {
  background: #fff3d4;
  padding: 1em;
  margin: .5em .5em 0;
  font: .8em sans-serif;
  text-align: left;
  white-space: nowrap;
}

.note + .row .cell {
  margin-top: 0;
}

.container {
  display: inline-block;
  border: 1px dotted grey;
  position:relative;
}

.container:before {
  content: 'margin';
  position: absolute;
  top: 2px;
  left: 2px;
  font: italic .6em sans-serif;
}

.viewbox {
  box-shadow: 1rem 1rem 0 #EFEFEF inset, -1rem -1rem 0 #EFEFEF inset;
}

.container.viewbox:after {
  content: 'viewbox';
  position: absolute;
  left: 1.1rem;
  top: 1.1rem;
  font: italic .6em sans-serif;
}

.cell span {
  display: block;
  margin-bottom: .5em;
}

p {
  font-family: sans-serif;
  background: #000;
  color: pink;
  margin: 2em;
  padding: 3em 1em;
  border: 1em solid pink;
  width: 6em;
}

.none { clip-path: none; }
.svg  { clip-path: url(#myPath); }
.svg2 { clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z');}
.shape1 { clip-path: circle(25%); }
.shape2 { clip-path: circle(25% at 25% 25%); }
.shape3 { clip-path: fill-box    circle(25% at 25% 25%); }
.shape4 { clip-path: stroke-box  circle(25% at 25% 25%); }
.shape5 { clip-path: view-box    circle(25% at 25% 25%); }
.shape6 { clip-path: margin-box  circle(25% at 25% 25%); }
.shape7 { clip-path: border-box  circle(25% at 25% 25%); }
.shape8 { clip-path: padding-box circle(25% at 25% 25%); }
.shape9 { clip-path: content-box circle(25% at 25% 25%); }

.defs {
  width: 0;
  height: 0;
  margin: 0;
}

pre { margin-bottom: 0; }

svg {
  margin: 1em;
  font-family: sans-serif;
  width: 192px;
  height: 192px;
}

svg rect {
  stroke: pink;
  stroke-width: 16px;
}

svg text {
  fill: pink;
  text-anchor: middle;
}

svg text.em {
  font-style: italic;
}

Complete example

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>
  <option value="path('M 0 200 L 0,110 A 110,90 0,0,1 240,100 L 200 340 z')">path</option>
</select>

CSS

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

JavaScript

var clipPathSelect = document.getElementById("clipPath");
clipPathSelect.addEventListener("change", function (evt) {
  document.getElementById("clipped").style.clipPath = evt.target.value;
});

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. The `clip-path` property replaces the deprecated `clip` property.
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'clip-path' in that specification.	Recommendation	Initial definition (applies to SVG elements only).

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

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Basic support Experimental	Chrome Full support 55 Full support 55 Full support 24 Prefixed Prefixed Requires the vendor prefix: -webkit-	Edge No support No	Firefox Full support 3.5	IE No support No	Opera Full support 42	Safari No support No	WebView Android Full support 55	Chrome Android Full support 55 Full support 55 Full support Yes Prefixed Prefixed Requires the vendor prefix: -webkit-	Edge Mobile No support No	Firefox Android Full support 4	Opera Android Full support 42	Safari iOS No support No	Samsung Internet Android Full support 6.0 Full support 6.0 Full support Yes Prefixed Prefixed Requires the vendor prefix: -webkit-
On SVG elements	Chrome Full support 55	Edge Full support 15 Notes Full support 15 Notes Notes Edge only supports clip paths defined by `url()`.	Firefox Full support 52	IE Full support Yes Notes Full support Yes Notes Notes Internet Explorer only supports clip paths defined by `url()`.	Opera Full support 42	Safari No support No	WebView Android Full support 55	Chrome Android Full support 55	Edge Mobile Full support 12 Notes Full support 12 Notes Notes Edge only supports clip paths defined by `url()`.	Firefox Android Full support 52	Opera Android Full support 42	Safari iOS No support No	Samsung Internet Android Full support 6.0
`<basic-shape>`	Chrome Full support 55	Edge No support No	Firefox Full support 54 Full support 54 No support 47 — ? Disabled Disabled 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.	IE No support No	Opera Full support 42	Safari No support No	WebView Android Full support 55	Chrome Android Full support 55	Edge Mobile No support No	Firefox Android Full support 54 Full support 54 No support 47 — ? Disabled Disabled 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.	Opera Android Full support 42	Safari iOS No support No	Samsung Internet Android Full support 6.0
`path()`	Chrome No support No	Edge No support No	Firefox Full support 63 Disabled Full support 63 Disabled Disabled From version 63: this feature is behind the `layout.css.clip-path-path.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Edge Mobile No support No	Firefox Android Full support 63 Disabled Full support 63 Disabled Disabled From version 63: this feature is behind the `layout.css.clip-path-path.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No
Animations	Chrome Full support 55	Edge No support No	Firefox Full support 49	IE No support No	Opera Full support 42	Safari No support No	WebView Android Full support 55	Chrome Android Full support 55	Edge Mobile No support No	Firefox Android Full support 49	Opera Android Full support 42	Safari iOS No support No	Samsung Internet Android Full support 6.0
`fill-box` and `stroke-box`	Chrome No support No	Edge No support No	Firefox Full support 51 Notes Full support 51 Notes Notes This value was supported before Firefox 51, but as an alias to `border-box`.	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Edge Mobile No support No	Firefox Android Full support 51 Notes Full support 51 Notes Notes This value was supported before Firefox 51, but as an alias to `border-box`.	Opera Android ?	Safari iOS No support No	Samsung Internet Android No support No

Legend

Full support: Full support
No support: No support
Compatibility unknown: Compatibility unknown
Experimental. Expect behavior to change in the future.: Experimental. Expect behavior to change in the future.
See implementation notes.: See implementation notes.
User must explicitly enable this feature.: User must explicitly enable this feature.
Requires a vendor prefix or different name for use.: Requires a vendor prefix or different name for use.

clip-path

Syntax

Values

Formal syntax

Example

Complete example

HTML

CSS

JavaScript

Result

Specifications

Browser compatibility

Legend

See also

Document Tags and Contributors

clip-path

Syntax

Values

Formal syntax

Example

Complete example

HTML

CSS

JavaScript

Result

Specifications

Browser compatibility

Legend

See also

Document Tags and Contributors

Learn the best of web development

Thanks! Please check your inbox to confirm your subscription.