Try it Live

<!DOCTYPE html>
<html>
 <head>
  <style>
  #shorthand_border_imagec {
    border: 20px solid transparent;
    border-image: url(img/shorthand_border_image_property.png) 40% round;
  }
  #shorthand_border_imaged {
    border: 10px solid transparent;
    border-image: url(img/shorthand_border_image_property.png) 30% stretch;
  }
  
  #shorthand_border_imagee {
    border: 20px solid transparent;
    border-image: url(img/shorthand_border_image_property.png) 35% repeat;
  }
  
  #shorthand_border_imagef {
    border: 20px solid transparent;
    border-image: url(img/shorthand_border_image_property.png) 10;
  }
  
  #shorthand_border_imageh {
    border: 30px groove transparent;
    border-image: url(img/shorthand_border_image_property.png);
  }
  </style>
 </head>
 <body>
  <div>
  <p>This is the main image</p>  
  <img src="img/shorthand_border_image_property.png" alt="Cinque Terre" >
  </div>
  
  <p id="shorthand_border_imagec">CSS CSS Border Image - 40% round </p>
  
  <p id="shorthand_border_imaged">Here Border Image - 30% stretch </p>
  
  <p id="shorthand_border_imagee">And here image for Border is - 35% repeat </p>
  
  <p id="shorthand_border_imagef">Border Image - is given in 10 numeric value </p>
  
  <p id="shorthand_border_imageh">CSS Border Image - only image url provided</p>
  </body>
</html>