CSS - border-image Property

Quiz

CSS border-image property allows you to use an image as the border of an element. It is a shorthand property for defining values to the properties border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat.

Syntax

border-image: source slice width outset repeat | initial | inherit;

Property Values

Value	Description
border-image-source	It specifies the path of the image to be used as border.
border-image-slice	It specifies how the image is to be sliced.
border-image-width	It specifies the width of the specified image.
border-image-outset	It specifies the amount by which the border image is to be extended beyond the border box.
border-image-repeat	It specifies whether the image is to be rounded, strecthed or repeated.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Examples of CSS Border Image Property

The following examples explain the border-image property with different values.

Defining All Values of Border Image Property

The border-image property is a shorthand property for setting the values to image's source, slice, width, outset and repeat. In the following example, the values for the properties have been declared in one declaration.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .size {
                height: 200px;
                width: 300px;
                margin: 20px;
                border: 20px solid transparent;
        }

        .border-image-example1 {
                border-image: url(/css/images/white-flower.jpg)
                50 round;
        }

        .border-image-example2 {
                border-image: url(/css/images/white-flower.jpg)
                10 20 30 40 round;
        }
    </style>
</head>

<body>
        <h2>
                CSS border-image property
        </h2>

        <div class="border-image-example1 size">
                This border has been set using border-image
                with same slice value 50 for all sides.
        </div>


        <div class="border-image-example2 size">
                This border has been set using border-image
                with separate slice values 10 20 30 40 
                for all sides.
        </div>

        <p>
                Image used:
        </p>
        <img src="/?originalUrl=https%3A%2F%2Fwww.tutorialspoint.com%2Fcss%2Fimages%2Fwhite-flower.jpg" 
        alt="flower" height=150>

</body>

</html>

Constitutent Properties of Border Image Property

The border-image property combines border-image-source, border-image-slice, border-image-width, border-image-outset, and border-image-repeat. The following example demonstrate how these properties work together to create the border image effect.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .size {
                height: 150px;
                width: 200px;
                margin:60px;
                border: 30px solid transparent;
        }

        .border-image-example1 {
                border-image-source: 
                url(/css/images/white-flower.jpg);
                border-image-slice: 70;
                border-image-width: 15px;
                border-image-outset: 25px;
                border-image-repeat: repeat;
        }

        .border-image-example2 {
                border-image-source: 
                url(/css/images/white-flower.jpg);
                border-image-slice: 20 40 60 80;
                border-image-width: 17px;
                border-image-outset: 15px;
                border-image-repeat: stretch;
        }
    </style>
</head>

<body>
        <h2>
                CSS border-image property
        </h2>
        <div class="outer-box">
        <div class="border-image-example1 size">
                This border has been set using consitutent 
                properties of border-image with 70 slice, 
                25px width, 35px outset and repeat repeat.
        </div>
        </div>
        <div class="outer-box">
        <div class="border-image-example2 size">
                This border has been set using consitutent 
                properties of border-image with 20,40,60,80
                slice, 17px width,15px outset and 
                repeat stretch.
        </div>
        </div>
        <p>
                Image used:
        </p>
        <img src="/?originalUrl=https%3A%2F%2Fwww.tutorialspoint.com%2Fcss%2Fimages%2Fwhite-flower.jpg" 
        alt="flower" height=150>

</body>

</html>

Border Image Property with Gradient

CSS gradients can also be used to set the border of an element. There are three types of gradients supported: linear, radial and conic. These are shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        img {
                height: 200px;
                width: 200px;
                margin: 20px;
                border-style: solid;
                border-width: 10px;
        }

        img.linear-gradient {
                border-image: 
                linear-gradient(45deg, rgb(15, 64, 161),
                rgb(228, 6, 17)) 1;
        }

        img.radial-gradient {
                border-image: radial-gradient(rgb(58, 61, 60),
                rgb(47, 227, 221)) 1;
        }

        img.conic-gradient {
                border-image: 
                conic-gradient(red, yellow, green, aqua, blue) 
                1;
        }
   </style>
</head>

<body>
        <h2>
                CSS border-image property
        </h2>
        <div>
        <p>
                a) Linear Gradient
        </p>
        <img class="linear-gradient" 
        src="/?originalUrl=https%3A%2F%2Fwww.tutorialspoint.com%2Fcss%2Fimages%2Fwhite-flower.jpg" 
        alt="linear-gradient" />
        </div>
        <div>
        <p>
                b) Radial Gradient
        </p>
        <img class="radial-gradient" 
        src="/?originalUrl=https%3A%2F%2Fwww.tutorialspoint.com%2Fcss%2Fimages%2Fwhite-flower.jpg" 
        alt="radial-gradient" />
        </div>
        <div>
        <p>
                b) Conic Gradient
        </p>
        <img class="conic-gradient" 
        src="/?originalUrl=https%3A%2F%2Fwww.tutorialspoint.com%2Fcss%2Fimages%2Fwhite-flower.jpg" 
        alt="conic-gradient" />
        </div>
</body>

</html>

Supported Browsers

Property
border-image	16.0	11.0	15.0	6.0	15.0

css_reference.htm

Print Page