CSS border-image Property

September 29, 2023May 12, 2021 Manoj Kumar

CSS border-image property is used to set an image as an element’s border. It is a shorthand for the below five properties:

The example below sets the image ‘border-diamonds.png’ around the <div> element as a border.

Example:

div{
  border-image: url(images/border-diamonds.png) 30 round;
}

Note: If any of the border-image property’s value is omitted, its default value is used.

The border-image property has the below syntax:

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

The border-image property accepts the following values:

border-image-source	Specifies the source/location of the image to be used as border.
border-image-slice	Specifies how the image should be sliced. The image is always sliced into 9 sections: 4 corners, 4 edges, and one middle section.
border-image-width	Specifies the width of the image border.
border-image-outset	Specifies the distance between the element’s border box and the border image.
border-image-repeat	Specifies how the sliced image should be tiled and scaled to fill the image border.
initial	Sets the border-image property to its default value.
inherit	Inherits the border-image property from the parent element.

Default Value	none 100% 1 0 stretch
Inherited	No
JavaScript Usage	element.style.borderImage = “url(images/border-diamonds.png) 30 round”;

CSS Tutorial: CSS Borders

Manoj Kumar

Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.
View all posts