mask-border-repeat
Definition
The mask-border-repeat property specifies how the mask border image should be repeated to fill the mask border area. This property applies only to the mask border, not to the element to which the mask is applied.
Examples
Repeat the mask border image horizontally and vertically to fill the mask border area:
div {
mask-border-repeat: repeat;
}
Repeat the mask border image horizontally to fill the mask border area, and use a single image for the vertical border:
div {
mask-border-repeat: repeat-x no-repeat;
}
Values
| Value | Description |
|---|---|
| repeat | Repeats the mask border image both horizontally and vertically to fill the mask border area. This is the default value. |
| repeat-x | Repeats the mask border image horizontally to fill the mask border area, but not vertically. |
| repeat-y | Repeats the mask border image vertically to fill the mask border area, but not horizontally. |
| no-repeat | Displays the mask border image only once, without repeating it. |
| space | Repeats the mask border image as many times as possible without clipping it, and spaces the repetitions evenly so that the area is completely filled. |
| round | Repeats the mask border image as many times as necessary to completely fill the mask border area, and scales the repetitions up or down to avoid clipping. |
Best Practices
- Use mask-border-repeat in combination with mask-border-image to create a unique and visually appealing mask border.
- Avoid using the repeat value excessively, as it can make the mask border appear repetitive and monotonous.
- 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 |