Web/CSS/-webkit-mask-box-image

From Get docs

Non-standard This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.


-webkit-mask-box-image sets the mask image for an element's border box.

Syntax

-webkit-mask-box-image: <mask-box-image> [<top> <right> <bottom> <left> <x-repeat> <y-repeat>]

Where:

<mask-box-image>
<uri> | <gradient> | none
<top> <right> <bottom> <left>
<length> | <percentage>
<x-repeat> <y-repeat>
repeat | stretch | round | space

Values

<uri>
The location of the image resource to be used as a mask image.
<gradient>
A -webkit-gradient function to be used as a mask image.
none
Used to specify that a border box is to have no mask image.
<length>
The size of the mask image's offset. See <length> for possible units.
<percentage>
The mask image's offset has a percentage value relative to the border box's corresponding dimension (width or height).
repeat
The mask image is repeated as many times as is necessary to span the border box. May include a partial image if the mask image does not divide evenly into the border box.
stretch
The mask image is stretched to contain the border box exactly.
round
The mask image is stretched somewhat and repeated such that there is no partial mask image at the end of the border box.
space
The mask image is repeated as many times as possible without stretching. There is no partial mask image at the end of the border box.

Formal definition

Value not found in DB!

Formal syntax

Syntax not found in DB!

Examples

Setting an image

.exampleone {
  -webkit-mask-box-image: url('mask.png');
}

Offsetting and filling an image

.exampletwo {
  -webkit-mask-box-image: url('logo.png') 100 100 0 0 round round;
}

Specifications

Not part of any standard.

Browser compatibility

Update compatibility data on GitHub

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet

-webkit-mask-box-image

Non-standard'

Chrome

Full support 1

Edge

Full support 18

Firefox

No support No

IE

No support No

Opera

Full support 15

Safari

Full support 3.2

WebView Android

Full support 2

Chrome Android

Full support 18

Firefox Android

No support No

Opera Android

Full support 14

Safari iOS

Full support 3.2

Samsung Internet Android

Full support 1.0

Legend

Full support  
Full support
No support  
No support
Non-standard. Expect poor cross-browser support.'
Non-standard. Expect poor cross-browser support.


See also

-webkit-mask, -webkit-mask-origin, -webkit-mask-attachment,-webkit-mask-clip,-webkit-mask-image,-webkit-mask-composite,-webkit-mask-repeat