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.
/* 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.
<clip-source>
<url>
referencing an SVG <clipPath>
element.<basic-shape>
<geometry-box>
value. If no geometry box is specified, the border-box
will be used as the reference box.<geometry-box>
<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
border-box
padding-box
content-box
fill-box
stroke-box
view-box
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
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.
<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
<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>
#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. 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 |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 55
|
No | 3.5 | No | 42 | No |
On SVG elements | 55 | 15
|
52 | Yes
|
42 | No |
<basic-shape> |
55 | No | 54
|
No | 42 | No |
path() |
No | No | 63
|
No | No | No |
Animations | 55 | No | 49 | No | 42 | No |
fill-box and stroke-box
|
No | No | 51
|
No | No | No |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 55 | 55
|
No | 4 | 42 | No | 6.0
|
On SVG elements | 55 | 55 | 12
|
52 | 42 | No | 6.0 |
<basic-shape> |
55 | 55 | No | 54
|
42 | No | 6.0 |
path() |
No | No | No | 63
|
No | No | No |
Animations | 55 | 55 | No | 49 | 42 | No | 6.0 |
fill-box and stroke-box
|
No | No | No | 51
|
? | No | No |
mask
, filter
clip-path
, clip-rule
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path