Border Image

Written By: Avinash Malhotra

Updated on

  1. Home
  2. Frontend
  3. CSS3
  4. Border Image
  1. Border-Image
  2. Source
  3. Slice
  4. Width

Add Border Image in CSS

CSS Border Image Property allow to image to border. Till CSS2, we can add only colors to borders, but in css3 we can also add images to borders. border-image can only be used with border property. Without border-style, border-image is not possible.

Border-Image Properties

  1. Border-image-source
  2. Border-image-slice
  3. Border-image-width

Border Image Example

Border-Image-Source

border-image-source is compulsory to add source to border. Source can be url() or gradient. border-image-source

Border Image with url


 border:solid 10px;
 border-image-source:url(image.png);
 border-image-slice:1;

Border Image with Gradient


border:solid 10px;
border-image-source:linear-gradient(red,blue);
border-image-slice:1;

Border Image with Repeating Gradient


border:solid 10px;
border-image-source:repeating-linear-gradient(red 10px,blue 20px);
border-image-slice:1;

Border-Image-Slice

border-image-slice property divide border-image-source into regions. For border-image having width and height 30px, prefer border-image-slice equal to 30.

Border-image-slice values

  1. number
  2. percentage
  3. fill

Border Slice example


border:solid 10px;
border-image-source:url(img/pic.png);
border-image-slice: 15;

Border-Image-width

Border-image-width property change width of border-image. 


      border:solid 10px;
      border-image-source:;
      border-image-slice: 1;
      border-image-width:15px;