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 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;
<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>
<svg>
<clipPath id="myPath" clipPathUnits="objectBoundingBox">
<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" />
</clipPath>
</svg></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: 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>
mlk
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 {
display: flex;
flex: 1 auto;
flex-direction: column;
}
.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); }
.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;
}
| 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 |
Syntax
The clip-path property is specified as one or a combination of the values listed below.
Values
url()- 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, theborder-boxwill 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 aborder-radius), to be the clipping path. The geometry box can be one of the following values: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
viewBoxattribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by theviewBoxattribute and the dimension of the size of the reference box is set to the width and height values of theviewBoxattribute. 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- No clipping path is created.
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-boxwhere
<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-boxwhere
<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 shape */
.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);
}
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. |
| 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 (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| On HTML elements | 24-webkit[1] 55.0 |
No support[2] | 3.5 (1.9.1) | No support | (Yes)-webkit[1] | No support[3] |
<basic-shape> |
55.0 | No support[2] | 54 (54)[5] | No support | 42.0 | No support[3] |
| On SVG content | 55.0 | 20 (12.10240)[4] | 52 (52)[6] | (Yes)[4] | 42.0 | No support[3] |
inset() |
55.0 | No support[2] | 54 (54)[5] | No support | 42.0 | No support[3] |
| Animations | 55.0 | No support[2] | 49 (49) | No support | 42.0 | No support[3] |
fill-box and stroke-box |
No support | No support[2] | 51 (51)[7] | No support | No support | No support[3] |
| Feature | Android | Android Webview | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|---|
| On HTML elements | 55.0 | 55.0 | No support | 1.0 (1.9.1) | No support | ? | No support[3] | (Yes) -webkit 55.0 |
<basic-shape> |
55.0 | 55.0 | No support | 54.0 (54)[5] | No support | ? | No support[3] | 55.0 |
| On SVG content | 55.0 | 55.0 | 20 (12.10240)[4] | 52.0 (52)[6] | No support | ? | No support[3] | 55.0 |
inset() |
55.0 | 55.0 | No support | 54.0 (54)[5] | No support | ? | No support[3] | 55.0 |
| Animations | 55.0 | 55.0 | No support | 49.0 (49) | No support | ? | No support[3] | 55.0 |
fill-box and stroke-box |
No support | No support | No support | 51 (51)[7] | No support | ? | No support[3] | No support |
[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 was implemented behind the preference layout.css.clip-path-shapes.enabled, defaulting to false, since Gecko 47 (Firefox 47.0 / Thunderbird 47.0 / SeaMonkey 2.44). 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 defaulted to true on Nightly and Developer Edition (bug 1303654), since Gecko 54 (Firefox 54.0 / Thunderbird 54.0 / SeaMonkey 2.51) it also defaults to true on Beta and Stable releases bug 1247229.
[6] This feature got implemented in bug 1246741.
[7] Before Firefox 51, fill-box and stroke-box where aliases for border-box.
See also
Document Tags and Contributors
Tags:
Contributors to this page:
Jeremie,
MarkusStange,
mfluehr,
chrisdavidmills,
brianmacdonald,
arturparkhisenko,
Sebastianz,
arronei,
durfee,
jpmedley,
erikadoyle,
yisibl,
jsartelle,
teoli,
wengker90,
y0ssar1an,
duncanmcdonald,
Siilwyn,
LouisLazaris,
fscholz,
George8211,
Maaaks,
jackarmley,
jtojnar,
jsx,
qcgm,
sraghav,
chRyNaN,
mienaikoe,
Jonathan_Watt,
kscarfone,
Sheppy,
ethertank,
mnoorenberghe,
brianloveswords,
grendel,
BijuGC
Last updated by:
Jeremie,