mask-border-source
Description
The mask-border-source property for CSS specifies an image to be used as the mask border image.
Syntax
CSS
mask-border-source: value;
JS
object.style.maskBorderSource = "value";
Values
<'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 (%).
Initial
none
