CSS border-image Property

February 10, 2021 12:37 pm IST

You are Here:

CSS border-image Property

CSS border-image property draws an image in place of an element's border-style. It is a shorthand property of the following CSS properties.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ min-height: 50px; padding-top: 10px; text-align: center; border-width: 50px; border-style: solid; border-image: url("car-left.png") 95% round; } </style> </head> <body> <h1>CSS border-image Property</h1> <div id="point"> border-image: url("car-left.png") 95% round; </div> </body> </html>

Run

Syntax

Using CSS

element{ // border: border-image-source border-image-slice border-image-repeat; border-image: url(car.png) 95% round; }

Using Javascript

object.style.borderImage="url(car.png) 95% round";

Animatable

No, border-image property is not animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS border-image property is none 100% 1 0 stretch.

Property Value

The following table provides a list of values for CSS border-image property.

Value	Type	Explanation
border-image-source	Required	Specifies the path to the image to be used as a border.
border-image-slice	Required	Specifies how to divide the border image.
border-image-width	Optional	Specifies the width of the border image.
border-image-outset	Optional	Specifies the amount by which the border image area extends beyond the border box.
border-image-repeat	Required	Specifies how the edge regions of a source image are adjusted to fit the dimensions of an element's border image.

Using JavaScript

In the following example, we will demonstrate how to set the CSS border-image property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ min-height: 50px; padding-top: 10px; text-align: center; border-width: 50px; border-style: solid; border-color: #fff; } </style> </head> <body> <h1>CSS border-image Property</h1> <div> This is div container. </div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("div")[0]; function myFunction(){ x.style.borderImage = "url('car-left.png') 95% round"; } </script> </body> </html>

Run