mask-border-outset
Definition
The mask-border-outset property specifies the amount by which a mask border image should be extended beyond the border box of the mask element. This property applies only to the mask border, not to the element to which the mask is applied.
Examples
Set the outset of the mask border on all sides to 10 pixels:
div {
mask-border-outset: 10px;
}
Set the outset of the mask border on each side separately:
div {
mask-border-outset: 10px 5px 15px 20px;
}
Values
| Value | Description |
|---|---|
<length> | Specifies a fixed length for the outset of the mask border in pixels, ems, rems, etc. |
<percentage> | Specifies a percentage of the width of the containing element. |
inherit | Inherits the outset value from the parent element. |
Best Practices
- Use mask-border-outset in combination with mask-border-width to create a border with a beveled or embossed effect.
- Avoid using large outset values, as they can make the mask border appear distorted and visually unappealing.
- Test the mask border in different browsers to ensure cross-browser compatibility.
Browser Compatibility
| Chrome | Firefox | Safari | Internet Explorer | Microsoft Edge | Opera |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |