Unsere Freiwilligen haben diesen Artikel noch nicht in Deutsch übersetzt. Machen Sie mit und helfen Sie, das zu erledigen!
Sie können den Artikel auch auf English (US) lesen.

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The mask-border CSS property lets you create a mask along the edge of an element's border.

This property is a shorthand for mask-border-source, mask-border-slice, mask-border-width, mask-border-outset, mask-border-repeat, and mask-border-mode. As with all shorthand properties, any omitted sub-values will be set to their initial value.

Syntax

/* source | slice */
mask-border: url('border-mask.png') 25;

/* source | slice | repeat */
mask-border: url('border-mask.png') 25 space;

/* source | slice | width */
mask-border: url('border-mask.png') 25 / 35px;

/* source | slice | width | outset | repeat | mode */
mask-border: url('border-mask.png') 25 / 35px / 12px space alpha;

Values

<'mask-border-source'>
The source image. See mask-border-source.
<'mask-border-slice'>
The dimensions for slicing the source image into regions. Up to four values may be specified. See mask-border-slice.
<'mask-border-width'>
The width of the border mask. Up to four values may be specified. See mask-border-width.
<'mask-border-outset'>
The distance of the border mask from the element's outside edge. Up to four values may be specified. See mask-border-outset.
<'mask-border-repeat'>
Defines how the edge regions of the source image are adjusted to fit the dimensions of the border mask. Up to two values may be specified. See mask-border-repeat.
<'mask-border-mode'>
Defines whether the source image is treated as a luminance mask or alpha mask. See mask-border-mode.

Formal syntax

<'mask-border-source'> || <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]? || <'mask-border-repeat'> || <'mask-border-mode'>

Example

Bitmap

In this example, we will mask an element's border with a diamond pattern. The source for the mask is a ".png" file of 90 by 90 pixels, with three diamonds going vertically and horizontally:

HTML

<div id="bitmap">This element is surrounded by a bitmap-based mask border! Pretty neat, isn't it?</div>

CSS

To match the size of a single diamond, we will use a value of 90 divided by 3, or 30, for slicing the image into corner and edge regions. A repeat value of round will make the mask slices fit evenly, i.e., without clipping or gaps.

div {
  width: 200px;
  background-color: lavender;
  border: 18px solid salmon;
  padding: 10px;

  mask-border:
    url("https://mdn.mozillademos.org/files/15836/mask-border-diamonds.png")  /* source */
    30 /         /* slice */
    36px 18px    /* width */
    round;       /* repeat */
}

Result

Specifications

Specification Status Comment
CSS Masking Module Level 1
The definition of 'mask-border' in that specification.
Candidate Recommendation Initial definition

Initial valueas each of the properties of the shorthand:
Applies toall elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
Inheritedno
Percentagesas each of the properties of the shorthand:
Mediavisual
Computed valueas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:
Canonical orderper grammar
Creates stacking contextyes

Browser compatibilityEdit

TBD

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: mdnwebdocs-bot, mfluehr
Zuletzt aktualisiert von: mdnwebdocs-bot,