CSS Border Images

CSS Border Images

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 -