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



The mask-border-source property defines the source image or element used to create the mask border of an element. It is used together with the mask-border-width, mask-border-outset, mask-border-repeat, and mask-border-slice properties to create a mask border around an element.


Using an image as the mask border source:

div {
  mask-border-source: url(border.png);
  mask-border-width: 10px;
  mask-border-repeat: round;
  mask-border-slice: 20%;
  mask-border-outset: 5px;

Using a CSS gradient as the mask border source:

div {
  mask-border-source: linear-gradient(to right, red, blue);
  mask-border-width: 10px;
  mask-border-repeat: space;
  mask-border-slice: 50% 50% 0% 0%;

Using the none keyword to remove the mask border:

div {
  mask-border-source: none;


<url>Specifies the URL of the image to be used as the mask border source.
<image>Specifies an <image> element to be used as the mask border source.
noneRemoves the mask border.

Best Practices

  • Use the mask-border-width property to set the width of the mask border
  • Experiment with different values for the mask-border-repeat property to achieve the desired effect for the mask border.
  • Use the mask-border-outset property to add an outward offset to the mask border, which can create a 3D effect.
  • Avoid using large images as the mask border source, as they may affect the performance of the webpage.
  • Keep in mind that the mask-border shorthand property can be used to set all the mask border properties at once.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera