CSS - Border Images

CSS border-images properties are used to create custom borders by setting image as border around any element.

Theborder-imageproperty takes the image and slices it into nine sections(3x3). It then places the corners at the corner of the border, and the edges are repeated or stretched as you specify. Middle part of image will be ignored.

Border Image

Table of Contents

Example of Image as BorderCSS Border Image SourceCSS Border Image SliceCSS Border Image WidthCSS Border Image OutsetCSS Border Image RepeatBorder Image ShorthandCSS Gradient as Border ImagesBorder Image All Properties

Example of Image as Border

The following code shows a basic example of how to set image as border.

Example

CSS Border Image Source

The CSSborder-image-sourceproperty specifies the source (url) of an image to be passed as a border to an element.

Example

CSS Border Image Slice

Theborder-image-sliceproperty defines how the image is sliced into regions, which are then used to draw the borders.

The following diagram demonstrates how image is sliced to make border. The image is divided into 9 sections: four corners, four edges, and the center.

The value in the ‘border-image-slice’ property specifies how far inward from the edges of the image the slicing should occur. It essentially defines the size of the areas that will be used to create the border.

The offset for border-image-slice can be provided in terms of percentage or length units but percentages are highly recommended.

Example

CSS Border Image Width

Theborder-image-widthproperty is used to specify the width of the image to be set as a border.

Example

CSS Border Image Outset

Theborder-image-outsetproperty is used to specify gap between element and border-image. This property pushes the border image outside, beyond the border box.

Example

CSS Border Image Repeat

Theborder-image-repeatproperty in used to repeating and stretching nature of image around border. By default the border image gets stretched along the sides.

The value repeat for this property, repeats the image specified along the sides of the border until the whole length and width got filled.

It can also take the value as round, apart from stretch and repeat.

Example

Border Image Shorthand Property

Theborder-imageshorthand property allows you to set all the properties related to border images in one declaration.

border-image: image-source | image-slice | image-repeat;

Following example shows how to use this property.

Example

CSS Gradient as Border Images

CSSgradientscan also be used to set the border of an element. There are three types of gradients supported: linear, radial and conic.

Following example shows how to use this property.

Example

CSS Border Images All Properties

All the properties related toborder-imagesare listed in the table below:

PropertyDescriptionExampleborder-imageA shorthand property for setting border image.Try Itborder-image-outsetSets the image outset i.e how much the border image area extends beyond the border box.Try Itborder-image-repeatDetermines whether the border image should be repeated, rounded, spaced or stretched.Try Itborder-image-sourceSets the source/path of an image to be passed as a border to an element.Try Itborder-image-sliceShows how to slice up an image in a border.Try Itborder-image-widthSets the width of the image to be set as a border.Try It