Beyond mask-border-source: Alternative Approaches for Creative Borders in CSS

mask-border-source property in CSS

The mask-border-source property in CSS allows you to define an image that will be used to create a patterned border around an element. This enables you to create more visually interesting and decorative borders compared to the basic solid-colored borders.

How it works

1. Image Selection
   You specify the image source using the mask-border-source property. This can be a path to an image file (e.g., mask-border-source: url('border-pattern.png');).

2. Slicing (Optional)
   The mask-border-slice property (often used in conjunction with mask-border-source) can be used to divide the source image into nine regions. These regions are then applied to the element's borders in a specific order, allowing you to create more intricate border patterns from a single image.

Visual Representation (without mask-border-slice)

Imagine a rectangular image that will be used as the border pattern. The entire image is applied to create a patterned border around the element.

Example

.my-element {
  border: 2px solid #ddd;  /* Fallback for browsers that don't support mask borders */
  mask-border-source: url('border-pattern.png');
}

In this example, the border-pattern.png image will be used to create a patterned border around the .my-element element. If the browser doesn't support mask borders, a solid border with color #ddd will be used as a fallback.

Browser Support

---

Simple Patterned Border

.image-border {
  border: 2px solid #ddd;  /* Fallback */
  mask-border-source: url('dotted-border.png');
}

This code creates a dotted border around the element using the dotted-border.png image.

Creating a Wavy Border

.wavy-border {
  border: 2px solid #00f;  /* Fallback */
  mask-border-source: url('wavy-pattern.png');
}

This code applies a wavy border using the wavy-pattern.png image.

Diagonal Stripes (Using mask-border-slice)

.diagonal-stripes {
  border: 2px solid #ccc;  /* Fallback */
  mask-border-source: url('diagonal-stripes.png');
  mask-border-slice: 0 0 0 50%;  /* Slice the top half of the image */
  mask-border-repeat: round;   /* Repeat the sliced portion to fill the border */
}

This code creates diagonal stripes using the diagonal-stripes.png image. The mask-border-slice property is used to slice the top half of the image, and mask-border-repeat ensures the sliced portion is repeated to create the full border.

---

Using border-image

The border-image property allows you to specify an image for the border of an element. It works similarly to mask-border-source but with wider browser compatibility.

.image-border {
  border-image-source: url('dotted-border.png');
  border-image-slice: 100%;  /* Stretch the entire image */
  border-image-width: 2px;    /* Set border width */
  border-image-outset: 0;     /* No additional margin around the image */
}

This code achieves a dotted border effect similar to the first mask-border-source example, but with border-image properties.

Using SVG Borders

Scalable Vector Graphics (SVG) can be used to create complex border shapes. You can define SVG code with your desired border pattern and then reference it as a background image:

.wavy-border {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg width="100%" height="2px" viewBox="0 0 100 2"><path d="M0 1 Q25 0.5 50 1 Q75 1.5 100 1" stroke="#00f" stroke-width="2" fill="transparent"/></svg>');
  background-repeat: repeat-x;
}

This code creates a wavy border using SVG code embedded within the CSS.

Using Pseudo-elements with Borders

You can leverage pseudo-elements like ::before and ::after to create additional elements with borders positioned around the main element.

.diagonal-stripes {
  position: relative;  /* Required for pseudo-element positioning */

  &::before {
    content: "";
    position: absolute;
    top: -2px;   /* Adjust positioning as needed */
    left: 0;
    width: 100%;
    height: 2px;
    background-image: linear-gradient(to right, #ccc 40%, transparent 60%);
    background-repeat: repeat-x;
  }
}

This code creates diagonal stripes using a ::before pseudo-element with a repeating linear gradient background simulating diagonal lines.