-webkit-mask-clip Redirect 1

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.

Summary

If a -webkit-mask-image is specified, -webkit-mask-clip determines the mask image's clipping behavior.

Syntax

-webkit-mask-clip:  <clip-style>[, <clip-style>]*

Where:

<clip-style>
border | padding | content | text

Values

border
If border is specified, the mask image extends to the border of the element.
padding
If padding is specified, the mask image extends to the padding of the element.
content
If content is specified, the mask image clips to the content of the element.
text
If text is specified, the mask image clips to the text of the element.

Examples

div {
    -webkit-mask-image: url('images/mask.png');
    -webkit-mask-clip: padding;
}

Browser Compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 Not supported Not supported Not supported 4.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 2.1 Not supported Not supported Not supported 3.2

See also

-webkit-mask, -webkit-mask-origin, -webkit-mask-box-image, -webkit-mask-image,-webkit-mask-composite,-webkit-mask-repeat

Document Tags and Contributors

Contributors to this page: Sheppy
Last updated by: Sheppy,
Hide Sidebar