The clip-path
CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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: ellipse(50px 60px at 0 10% 20%); 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 an SVG<clipPath>
element. <basic-shape>
- A shape whose size and position is defined by the
<geometry-box>
value. If no geometry box is specified, theborder-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 aborder-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 theviewBox
attribute and the dimension of the size of the reference box is set to the width and height values of theviewBox
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 definition
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 |
Computed value | as specified, but with <url> values made absolute
|
Animation type | yes, as specified for <basic-shape> , otherwise no
|
Formal syntax
<clip-source> | [ <basic-shape> || <geometry-box> ] | nonewhere <clip-source> = <url><basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()> | <path()><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> ]# )<path()> = path( [ <fill-rule>, ]? <string> )<shape-box> = <box> | margin-boxwhere <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
Examples
Comparison of HTML and SVG
<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: 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
const 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 1The 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). |
CSS Shapes Module Level 2The definition of 'path' in that specification. | Editor's Draft | Defines path() .
|
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
clip-path
|
Chrome Full support 55 Full support 55 Full support 23 Prefixed' Implemented with the vendor prefix: -webkit- |
Edge Full support 12 Full support 12 Notes' Edge only supports clip paths defined by |
Firefox
Full support 3.5 |
IE Full support 10 Full support 10 Notes' Internet Explorer only supports clip paths defined by |
Opera Full support 42 Full support 42 Full support 15 Prefixed' Implemented with the vendor prefix: -webkit- |
Safari Full support 9.1 Full support 9.1 Full support 6.1 Prefixed' Implemented with the vendor prefix: -webkit- |
WebView Android Full support 55 Full support 55 Full support ≤37 Prefixed' Implemented with the vendor prefix: -webkit- |
Chrome Android Full support 55 Full support 55 Full support 25 Prefixed' Implemented with the vendor prefix: -webkit- |
Firefox Android
Full support 4 |
Opera Android Full support 42 Full support 42 Full support 14 Prefixed' Implemented with the vendor prefix: -webkit- |
Safari iOS Full support 9.3 Full support 9.3 Full support 6.1 Prefixed' Implemented with the vendor prefix: -webkit- |
Samsung Internet Android Full support 6.0 Full support 6.0 Full support 1.5 Prefixed' Implemented with the vendor prefix: -webkit- |
Animations | Chrome
Full support 55 |
Edge
Full support 79 |
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 |
Firefox Android
Full support 49 |
Opera Android
Full support 42 |
Safari iOS
No support No |
Samsung Internet Android
Full support 6.0 |
<basic-shape>
|
Chrome
Full support 23 |
Edge
Full support 79 |
Firefox Full support 54 Full support 54 No support 47 — 54 Disabled' From version 47 until version 54 (exclusive): this feature is behind the |
IE
No support No |
Opera
Full support 15 |
Safari
Full support 6.1 |
WebView Android
Full support 4.4 |
Chrome Android
Full support 25 |
Firefox Android Full support 54 Full support 54 No support 47 — 54 Disabled' From version 47 until version 54 (exclusive): this feature is behind the |
Opera Android
Full support 14 |
Safari iOS
Full support 6.1 |
Samsung Internet Android
Full support 1.5 |
fill-box and stroke-box
|
Chrome
No support No |
Edge
No support No |
Firefox Full support 51 Full support 51 Notes' This value was supported before Firefox 51, but as an alias to |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android Full support 51 Full support 51 Notes' This value was supported before Firefox 51, but as an alias to |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
On HTML elements | Chrome
Full support 23 |
Edge
Full support 79 |
Firefox
Full support 3.5 |
IE
No support No |
Opera
Full support 15 |
Safari
Full support 6.1 |
WebView Android
Full support 4.4 |
Chrome Android
Full support 25 |
Firefox Android
Full support 4 |
Opera Android
Full support 14 |
Safari iOS
Full support 6.1 |
Samsung Internet Android
Full support 1.5 |
path()
|
Chrome
No support No |
Edge
No support No |
Firefox Full support 71 Full support 71 Full support 63 Disabled' From version 63: this feature is behind the |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android Full support 63 Full support 63 Disabled' From version 63: this feature is behind the |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
On SVG elements | Chrome
Full support 23 |
Edge
Full support 12 |
Firefox
Full support 52 |
IE
Full support 10 |
Opera
Full support 15 |
Safari
Full support 6.1 |
WebView Android
Full support 4.4 |
Chrome Android
Full support 25 |
Firefox Android
Full support 52 |
Opera Android
Full support 14 |
Safari iOS
Full support 6.1 |
Samsung Internet Android
Full support 1.5 |
Legend
- Full support
- Full support
- No support
- No support
- 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.
See also
- Shapes in clipping and masking – and how to use them
- CSS properties:
mask
,filter
- Applying SVG effects to HTML content
- SVG attributes:
clip-path
clip-rule
clip-path by Mozilla Contributors is licensed under CC-BY-SA 2.5.