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.


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


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


The location of the image resource to be used as a mask image.
A -webkit-gradient function to be used as a mask image.
Used to specify that a border box is to have no mask image.
The size of the mask image's offset. See <length> for possible units.
The mask image's offset has a percentage value relative to the border box's corresponding dimension (width or height).
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.
 The mask image is stretched to contain the border box exactly.
 The mask image is stretched somewhat and repeated such that there is no partial mask image at the end of the border box.


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

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

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Chrome Full support 1Edge Full support 18Firefox No support NoIE No support NoOpera Full support 15Safari Full support 3.2WebView Android Full support 2Chrome Android Full support 18Firefox Android No support NoOpera Android Full support 14Safari iOS Full support 3.2Samsung Internet Android Full support 1.0


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