border-image

Description
Syntax
Examples
Links

Description

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

Syntax

CSS

border-image: value;

JS

object.style.borderImage = "value";

Values

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

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

none

Border styles are used or the borders are not drawn.

<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 (%).

<'border-image-slice'> = [<number [0,∞]> | <percentage [0,∞]>]{1,4} && fill?

<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 border-image to be preserved.

<'border-image-width'> = [ <length-percentage [0,∞]> | <number [0,∞]> | 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.

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

<length>

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

<number>

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

stretch

The image is stretched to fill the area.

repeat

The image is tiled (repeated) to fill the area.

round

The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so that it does.

space

The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles.

Examples

1 · border-image-outset · length

2 · border-image-outset · number

3 · border-image-outset · JS

4 · border-image-repeat · repeat

5 · border-image-repeat · round

6 · border-image-repeat · space

7 · border-image-repeat · stretch

8 · border-image-repeat · JS

9 · border-image-slice · fill

10 · border-image-slice · number

11 · border-image-slice · percentage

12 · border-image-slice · JS

13 · border-image-source · image · gradient · linear-gradient

14 · border-image-source · image · gradient · radial-gradient

15 · border-image-source · image · gradient · conic-gradient

16 · border-image-source · image · url

17 · border-image-source · none

18 · border-image-source · JS

<!doctype html>
<html>
<head>
    <style>
        p
        {
            border-image-slice: 33.33%;
            border-style: solid;
            border-width: 20px;
        }
    </style>
</head>
<body>
    <button value="none">initial</button>
    <button value="linear-gradient(red, green, blue)">linear-gradient</button>
    <button value="radial-gradient(red, green, blue)">radial-gradient</button>
    <button value="conic-gradient(red, green, blue)">conic-gradient</button>
    <button value="url(/assets/svg/9Slice.svg)">url</button>
    <button>none</button>
    <p>border-image-source</p>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            document.querySelector("p").style.borderImage = myproperty + " 33.33%";
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>

19 · border-image-width · auto

20 · border-image-width · length

21 · border-image-width · number

22 · border-image-width · percentage

23 · border-image-width · JS

<!doctype html>
<html>
<head>
    <style>
        p
        {
            border-image-slice: 33.33%;
            border-image-source: url(/assets/svg/9Slice.svg);
            border-style: solid;
            border-width: 20px;
        }
    </style>
</head>
<body>
    <button value="1">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>
    <p>border-image-width</p>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            document.querySelector("p").style.borderImage = "url(/assets/svg/9Slice.svg) 33.33% / " + myproperty;
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>