CSS Border-Image
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: url(“....”);
|
Now we will see Example -
Example -
Output -
In the above example, the round indicates the slices.
Example -
We can also give the round in percentages -
Output -
