Border Image

Css Border-Image Property

Using an image as border to html elements is possible with CSS3.

For this, the border-image property is used. For older versions of browsers, the -webkit- and -moz- prefixes should be used.

In addition, border-style and border-width values ​​must be specified using the border property. If we don't do this, our picture border won't appear since the border-style property defaults to none.

The border-image property is used like this:

As seen in the example above, 3 properties must be specified. 

First, the path and name of the image to be used are specified in the url bracket. (border-image-source)

Secondly, it is determined in which dimensions this picture will be divided and distributed to the corners and edges. (border-image-slice)

Finally, with one of the round, repeat or stretch values, it is determined how the picture will be displayed on the edges between the corners (border-image-repeat).

In addition, the total width of the border is specified using the border property in the first line.

The most important part here is to determine how the picture will be fragmented by fine-tuning the second parameter. The image we use will be divided into 9 parts with the border-images property, then each fragmented corner and edge of the image will be placed on the corresponding corners and edges of the html element.

For example, let's try creating a border of stars. For this, we can prepare an image file as follows:

I prepared each star in this picture to be 40px wide. Since I set the border-image-slice value, that is, the second parameter to 40, the image will be fragmented as follows:

The border will then be created by placing all the pieces at the corresponding corners and edges.

For example, in order to see the employee state and understand it better, examine the examples in the subject examples section and try it yourself by changing the values.

EXERCISES