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.
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: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); /* 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, 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.
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 | 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> <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; }
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> </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
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 55 24 -webkit- | No | 3.5 | No | 42 | No |
On SVG elements | 55 | 151 | 52 | Yes2 | 42 | No |
<basic-shape> | 55 | No | 54 47 —?3 | No | 42 | No |
inset() | 55 | No | 54 473 | 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 | 55 Yes -webkit- | No | 4 | 42 | No | 6.0 Yes -webkit- |
On SVG elements | 55 | 55 | 121 | 52 | 42 | No | 6.0 |
<basic-shape> | 55 | 55 | No | 54 47 —?3 | 42 | No | 6.0 |
inset() | 55 | 55 | No | 54 473 | 42 | No | 6.0 |
Animations | 55 | 55 | No | 49 | 42 | No | 6.0 |
fill-box and stroke-box | No | No | No | 514 | ? | No | 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
- 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