CSS border-image Property

CSS border-image Property

With the border-image property you have the possibility to set an image to be used instead of normal border styles.

A border-image essentially consist of a -

border-image-source: The path to the image to be used.

border-image-slice: Specifies the offset that is used to divide the image into nine regions (four corners, four edges and a middle).
border-image-repeat: Specifies how the images for the sides and the middle of the border image are scaled.

Syntax -

border-image: none | url(image) imagesection [/imagewidth] imagehandling

where the image section defines the portions of the image that are used for various parts of the border.

The imagesection value can be composed of up to four slice lines on the image, each measured in pixels or percentages, as shown in this diagram -

Now we will see Example -

Example 1 -

<!DOCTYPE html>
<html>

<style>
p{
border: 4px solid transparent;
width: 70%;
height: 50%;
text-align: center;
border-image: url(image1.jpg) 40 round;
}
</style>

<body>

<p>Thi is a sample peragraph Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et officiis, praesentium eos voluptas maiores porro, saepe perspiciatis perferendis, rerum doloribus expedita quam excepturi quas voluptatum quos quidem iure aliquid exercitationem!</p>
</body>

</html>

Output -

In the above example, the round indicates the slices.

Example - We can also give the round in percentages -

Output -

NOTE -

• In Mozilla-based browsers like Firefox this property is -moz-border-image and in WebKit-based browsers like Chrome or Safari it is -webkit-border-image.

• The border image will tile over the center of the image as well, but if you make it transparent, you can have a background image or color show as well.

• The border image will cover a defined standard border, so it is useful to have a fallback in case browsers do not support this emerging property.