This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The mask-clip
CSS property determines the area, which is affected by a mask. The painted content of an element must be restricted to this area.
/* <geometry-box> values */ mask-clip: content-box; mask-clip: padding-box; mask-clip: border-box; mask-clip: margin-box; mask-clip: fill-box; mask-clip: stroke-box; mask-clip: view-box; /* Keyword values */ mask-clip: no-clip; /* Non-standard keyword values */ -webkit-mask-clip: border; -webkit-mask-clip: padding; -webkit-mask-clip: content; -webkit-mask-clip: text; /* Multiple values */ mask-clip: padding-box, no-clip; mask-clip: view-box, fill-box, border-box; /* Global values */ mask-clip: inherit; mask-clip: initial; mask-clip: unset;
Initial value | border-box |
---|---|
Applies to | all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | per grammar |
One or more of the keyword values listed below, separated by commas.
content-box
padding-box
border-box
margin-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 reference box is set to the width and height values of the viewBox
attribute.no-clip
border
border-box
.padding
padding-box
.content
content-box
.text
[ <geometry-box> | no-clip ]#where
<geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere
<shape-box> = <box> | margin-boxwhere
<box> = border-box | padding-box | content-box
#masked { width: 100px; height: 100px; background-color: #8cffa0; margin: 20px; border: 20px solid #8ca0ff; padding: 20px; mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg); mask-size: 100% 100%; mask-clip: border-box; /* Can be changed in the live sample */ }
Specification | Status | Comment |
---|---|---|
CSS Masking Module Level 1 The definition of 'mask-clip' in that specification. | Candidate Recommendation | Initial definition |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | Yes
|
? | 53 | No | Yes
|
Yes
|
border |
1 | ? | ? | No | Yes | 4 |
content |
1 | ? | ? | No | Yes | 4 |
padding
|
1 | ? | ? | No | Yes | 4 |
text
|
1 | ? | ? | No | Yes | 4 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | ? | ? | ? | 53 | ? | ? | ? |
border |
2 | ? | ? | ? | ? | 3.2 | ? |
content |
2 | ? | ? | ? | ? | 3.2 | ? |
padding
|
2 | ? | ? | ? | ? | 3.2 | ? |
text
|
2 | ? | ? | ? | ? | 3.2 | ? |
© 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/mask-clip