mask-border

Description
Syntax
Examples
Links

Description

The mask-border property for CSS is shorthand for mask-border-source, mask-border-slice, mask-border-width, mask-border-outset, mask-border-repeat, and mask-border-mode.

Syntax

CSS

mask-border: value;

JS

object.style.maskBorder = "value";

Values

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

<'mask-border-source'> = none | <image>

none

No mask border is created.

<image> = <url> | <gradient>

<url> = url( <string> <url-modifier>* )

<string>

Specifies a sequence of characters delimited by double quotes (") or single quotes (').

<url-modifier>

Changes the meaning or the interpretation of the URL.

<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>

<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )

<angle>

deg

Degrees. There are 360 degrees in a full circle.

grad

Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.

rad

Radians. There are 2p radians in a full circle.

turn

Turns. There is 1 turn in a full circle.

<side-or-corner> = [left | right] || [top | bottom]

left

Left.

right

Right.

top

Top.

bottom

Bottom.

<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#

<linear-color-stop> = <color> && <length-percentage>?

<color>

Specifies the color using a keyword or a numerical specification.

<length-percentage> =
    <length> |
    <percentage>

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<linear-color-hint> = <length-percentage>

<length-percentage> =
    <length> |
    <percentage>

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<repeating-linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )

<angle>

deg

Degrees. There are 360 degrees in a full circle.

grad

Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.

rad

Radians. There are 2p radians in a full circle.

turn

Turns. There is 1 turn in a full circle.

<side-or-corner> = [left | right] || [top | bottom]

left

Left.

right

Right.

top

Top.

bottom

Bottom.

<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#

<linear-color-stop> = <color> && <length-percentage>?

<color>

Specifies the color using a keyword or a numerical specification.

<length-percentage> =
    <length> |
    <percentage>

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<linear-color-hint> = <length-percentage>

<length-percentage> =
    <length> |
    <percentage>

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )

<ending-shape>

Determines whether the gradient's ending shape is a circle or an ellipse.

<size>

Determines the size of the gradient's ending shape.

<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]

left

Left.

center

Center.

right

Right.

top

Top.

bottom

Bottom.

<length-percentage> =
    <length> |
    <percentage>

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#

<linear-color-stop> = <color> && <length-percentage>?

<color>

Specifies the color using a keyword or a numerical specification.

<length-percentage> =
    <length> |
    <percentage>

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<linear-color-hint> = <length-percentage>

<length-percentage> =
    <length> |
    <percentage>

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<repeating-radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )

<ending-shape>

Determines whether the gradient's ending shape is a circle or an ellipse.

<size>

Determines the size of the gradient's ending shape.

<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]

left

Left.

center

Center.

right

Right.

top

Top.

bottom

Bottom.

<length-percentage> =
    <length> |
    <percentage>

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#

<linear-color-stop> = <color> && <length-percentage>?

<color>

Specifies the color using a keyword or a numerical specification.

<length-percentage> =
    <length> |
    <percentage>

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<linear-color-hint> = <length-percentage>

<length-percentage> =
    <length> |
    <percentage>

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<'mask-border-slice'> = <number-percentage>{1,4} fill?

<number-percentage> = [ <number> | <percentage> ]

<number>

An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

fill

Causes the middle part of the image to be preserved.

<'mask-border-width'> = [ <length-percentage> | <number> | auto ]{1,4}

<length-percentage> =
    <length> |
    <percentage>

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<number>

auto

Automatically specified by the user agent.

<'mask-border-outset'> = [ <length> | <number> ]{1,4}

<length>

Specifies the length using a number followed by a unit of measurement.

<number>

<'mask-border-repeat'> = [ stretch | repeat | round | space ]{1,2}

stretch

The image is stretched to fill the area.

repeat

The image is repeated in the horizontal and vertical direction as often as needed to cover the area.

round

The image is repeated as often as will fit within the area. If it doesn't fit a whole number of times, it is rescaled so that it does.

space

The image is repeated as often as will fit within the area without being clipped and then the images are spaced out to fill the area.

<'mask-border-mode'> = luminance | alpha

luminance

Indicates that the luminance values of the mask should be used.

alpha

Indicates that the alpha values of the mask should be used.

Examples

1 · mask-border-mode · alpha

2 · mask-border-mode · luminance

3 · mask-border-mode · JS

4 · mask-border-outset · length

5 · mask-border-outset · number

6 · mask-border-outset · JS

7 · mask-border-repeat · repeat

8 · mask-border-repeat · round

9 · mask-border-repeat · space

10 · mask-border-repeat · stretch

11 · mask-border-repeat · JS

12 · mask-border-slice · fill

13 · mask-border-slice · number

14 · mask-border-slice · percentage

15 · mask-border-slice · JS

16 · mask-border-source · image · gradient · linear-gradient

17 · mask-border-source · image · gradient · radial-gradient

18 · mask-border-source · image · url

19 · mask-border-source · none

20 · mask-border-source · JS

<!doctype html>
<html>
<head>
    <style>
        div
        {
            border-color: yellow;
            border-style: solid;
            border-width: 20px;
            mask-border-slice: 33.33%;
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button value="linear-gradient(black, transparent)">linear-gradient</button>
    <button value="radial-gradient(black, transparent)">radial-gradient</button>
    <button value="url(/assets/svg/Happy100.svg)">url</button>
    <button>none</button>
    <div>mask-border-source</div>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            document.querySelector("div").style.maskBorder = myproperty + " 33.33%";
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>

21 · mask-border-width · auto

22 · mask-border-width · length

23 · mask-border-width · number

24 · mask-border-width · percentage

25 · mask-border-width · JS

<!doctype html>
<html>
<head>
    <style>
        div
        {
            border-color: yellow;
            border-style: solid;
            border-width: 20px;
            mask-border-slice: 33.33%;
            mask-border-source: url(/assets/svg/9Slice.svg);
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button>auto</button>
    <button value="10px 20px 30px 40px">length</button>
    <button value="10 20 30 40">number</button>
    <button value="10% 20% 30% 40%">percentage</button>
    <div>mask-border-width</div>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            document.querySelector("div").style.maskBorder = "url(/assets/svg/9Slice.svg) 33.33% / " + myproperty;
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>