CSS Border Images

The border-image property allows us to specify an image to act as an element’s border.

The design of the border is created from the sides and corners of the image specified in border-image source URL. The border image may 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;
}

Output:-

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

PropertyDescription
border-imageA shorthand property for setting all the border-image-* properties
border-image-sourceSpecifies the path to the image to be used as a border
border-image-sliceSpecifies how to slice the border image
border-image-widthSpecifies the widths of the border image
border-image-outsetSpecifies the amount by which the border image area extends beyond the border box
border-image-repeatSpecifies whether the border image should be repeated, rounded or stretched