CSS Border Images

The border-image property allows us to specify an image to be used as an element's border.

The design of the border is created from the sides and corners of the image specified in the border-image source URL. The border image can be sliced, repeated, scaled, and stretched in various ways to fit the size of the border image area.

Input:-

Index.html

 

<body>   

    <div class="box"></div>

</body>

Style.css

.box {

width: 300px;

height: 150px;

border: 15px solid transparent;

-webkit-border-image: url("border.png") 30 30 round; /* Safari 3.1-5 */

-o-border-image: url("border.png") 30 30 round; /* Opera 11-12.1 */

border-image: url("border.png") 30 30 round;

}

Test Yourself

Output:-

Below are the some of the properities supported for border-image.

Property	Description
border-image	A shorthand property for setting all the border-image-* properties
border-image-source	Specifies the path to the image to be used as a border
border-image-slice	Specifies how to slice the border image
border-image-width	Specifies the widths of the border image
border-image-outset	Specifies the amount by which the border image area extends beyond the border box
border-image-repeat	Specifies whether the border image should be repeated, rounded, or stretched

Help Us to Improve our content

Let's Talk

CSS Border Images

Help Us to Improve our content

Important Links

Company

Others

Explore

CSS Border Images

Help Us to Improve our content

Important Links

Follow us on social :

Company

Others

Explore

Subscribe to Our News Letter!

Follow us on social :