CSS Border Image Generator

The border image property allows users to display an image as border surrounding an element.



Image used in source:

Example Image


Border Slice
Border Width
Border Outset


.element {
  width: 150px;
  height: 150px;
  border-style: solid;
  border-image-width: 20px 20px 20px 20px;
  border-image-slice: 50 50 50 50;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: round round;
  border-image-source: urls("https://htmlcss.tools/img/border_image.png");