How to use css border-image property? CSS Tutorial 22

 

  CSS border-image property

1. Introduction to CSS border-image property
2. Syntax of CSS border-image property
3. Example of CSS border-image property

Introduction to CSS border-image Property

The border box model is very important in CSS. You can separate the content of one element from another element by borders. It is important to design borders when you want to create an attractive website.

There are many properties available in CSS to design border. By which you can define the color of borders, their style (solid, dashed and double, etc.) and width. 

Apart from this, the border-radius property is available to make borders rounded in CSS. Which makes the elements look even more attractive and beautiful.

In the series of border properties, another property has been added to CSS3, which is called border-image property. Through this property, an image can be used as the border of an element.

There are several reasons for using images as a border, as per the theme of the webpage, a beautiful layout can be created using any image as a border.

Image borders look more beautiful than normal borders. Such borders blend perfectly into the theme of the website so that the user does not even know that the borders have been used. 

CSS border-image property can be applied to any element. But when the value collapse of border-collapse property for "th", "tr" and "td" elements is set, then this property can not be used.

In CSS, border-image is a shorthand property, whereby the value of the given properties can be defined at once.

• border-image-source

• border-image-slice

• border-image-width

• border-image-outset

• border-image-repeat

Currently, all these properties are not supported by any browser. So you should use the shorthand border-image property to define the image as a border.

Syntax of CSS border-image Property

The general syntax of the CSS border-image property is being given below.

       border-image:  source  slice  width  initialization  repeat;

As you can see in the above syntax, five values are defined for the border-image property. But this property can only be defined by the source value. When you do this, the remaining four default values are used.

All these values have been explained below in detail.

source

This value is the source of the image that you want to use as the border. As the background image define, the image is defined by the url () function. So, even here the url () function is used to define the image.

If you want, you can also define the CSS gradient colors instead of an image as the border. Apart from this, you can also use SVG images for borders. 

Border-image-source property is used to define this value separately. Its syntax has been given below.

border-image-source: url ("address-of-image") | CSS-gradient | SVG;

slice

This value is the number through this you want to slice(cut) the image which is used as a border. Image is always slice in nine parts. In which there are four corners, four sides top, bottom, left and right, and one middle part of the image Four corners of the image always keep fixes. You can manage the other side accordingly.

In addition to the number, this can define value in percent and you can also define the value “fill” which is filled image in the background.

Border-image-slice property is used to define this value separately. Its syntax has been given below.

border-image-slice: number-px | % | fill;

width

This value is the width of the image border. This value is mostly defined in pixels. Border-image-width property is used to define this value separately.

border-image-width: number-px;

outset

This value is a number that represents how much beyond the border image box model it will spread. The border-image-outset property is used to define this value separately.

border-image-outset: number-px;

repeat

This value defines that the border image should be repeated, stretched or rounded. This value can define you repeat, round or stretch.

Repeat value means that the image will be repeated. Stretch means that the area will be stretched to cover the area rather than repeat the image. Round value is used to repeat the image and fill the entire area. 

Border-image-repeat property is used to define this value separately. Its syntax has been given below.

border-image-repeat: repeat | stretch | round;

Example of CSS border-image Property

CSS border-image property has been explained by the below example.

<!DOCTYPE html>

<html>

<head>

 <title> CSS border-image property Example </title>
<style>
#imageBorder1{
     width: 350px;
     margin: 30px;
     padding: 15px;
     border: 20px solid;
     border-image: url(border.png) 150 round;
}
#imageBorder2{
     width: 350px;
     margin: 30px;
     padding: 15px;
     border: 20px solid;
     border-image: url(border.png) 150 stretch;
}
#originalImage, img{
margin: 30px;
}
</style>
</head>
<body>
<p id="imageBorder1"> This paragraph1 has an image border around it. Images are more attractive than normal borders. </P>
<p id="imageBorder2"> This paragraph2 has an image border around it. Images are more attractive than normal borders. </P>
<p id="originalImage"> Original image is here:</p><img src="border1.png">  

</body>

</html>

The above example will produce the below output.

          <<-- PREVIOUS                                                               NEXT -->>