1. css
  2. /properties
  3. /mask-border-repeat

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

ValueDescription
repeatRepeats the mask border image both horizontally and vertically to fill the mask border area. This is the default value.
repeat-xRepeats the mask border image horizontally to fill the mask border area, but not vertically.
repeat-yRepeats the mask border image vertically to fill the mask border area, but not horizontally.
no-repeatDisplays the mask border image only once, without repeating it.
spaceRepeats the mask border image as many times as possible without clipping it, and spaces the repetitions evenly so that the area is completely filled.
roundRepeats 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

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes