W3cubDocs

/CSS

clip-path

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.

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, 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 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> ] | none

where
<clip-source> = <url>
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()> | <path()>
<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> ]# )
<path()> = path( [ <fill-rule>, ]? <string> )
<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

Examples

Comparison of HTML and SVG

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);
}

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).
CSS Shapes Module Level 2
The definition of 'path' in that specification.
Editor's Draft Defines path().

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
clip-path 55
55
23
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
12
12
Edge only supports clip paths defined by url().
3.5 10
10
Internet Explorer only supports clip paths defined by url().
42
42
15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
9.1
9.1
6.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Animations 55 79 49 No 42 No
<basic-shape> 23 79 54
54
47 — 54
Disabled
Disabled From version 47 until version 54 (exclusive): 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.
No 15 6.1
fill-box and stroke-box No No 51
51
This value was supported before Firefox 51, but as an alias to border-box.
No No No
On HTML elements 23 79 3.5 No 15 6.1
path() No No 71
71
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.
No No No
On SVG elements 23 12 52 10 15 6.1
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
clip-path 55
55
≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
55
55
25
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
4 42
42
14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
9.3
9.3
6.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
6.0
6.0
1.5
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Animations 55 55 49 42 No 6.0
<basic-shape> 4.4 25 54
54
47 — 54
Disabled
Disabled From version 47 until version 54 (exclusive): 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.
14 6.1 1.5
fill-box and stroke-box No No 51
51
This value was supported before Firefox 51, but as an alias to border-box.
No No No
On HTML elements 4.4 25 4 14 6.1 1.5
path() No No 63
Disabled
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.
No No No
On SVG elements 4.4 25 52 14 6.1 1.5

See also

© 2005–2020 Mozilla 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