LCWD LogoLCWD
C

CSS Handbook

Clean • Professional

Border Images

2 minute

CSS Border Images (border-image)

The border-image property in CSS lets you use an image instead of a solid color for borders. The image is sliced into sections and then stretched, repeated, or rounded to fit the edges of the element, creating decorative and stylish frames.

How border-image Works

The border-image property slices the image into nine parts, similar to a tic-tac-toe board:

  1. Four corners → Placed at the corners of the element.
  2. Four edges → Placed along the sides.
  3. Center → Can be stretched or repeated depending on your settings.

border-image Shorthand Properties

The shorthand border-image property combines multiple border image properties:

PropertyDescription
border-image-sourceSpecifies the image to use as the border.
border-image-sliceDefines how to slice the image into corners and edges.
border-image-widthSets the width of the border image.
border-image-outsetDetermines how far the border image extends beyond the element.
border-image-repeatControls how the edges and center are filled: stretch, repeat, or round.

Syntax Example:

element {
  border: 10px solid transparent; /* Required */
  border-image: url('border.png') 30 round;
}

Border Image with round

round in border-image repeats the border evenly and resizes parts slightly to keep it smooth and neat.

<div id="borderimg1">Border Image Rounded</div>

#borderimg1 {
  border: 10px solid transparent; /* Required for border-image */
  padding: 20px;
  border-image: url('border.png') 30 round; /* Repeat the edges */
  width: 250px;
  text-align: center;
  font-weight: bold;
}

Output :

learn code with durgesh images

Border Image with stretch

stretch makes the border image fill the sides by stretching it instead of repeating.

<div id="borderimg2">Border Image Stretched</div>

#borderimg2 {
  border: 10px solid transparent;
  padding: 20px;
  border-image: url('border.png') 30 stretch; /* Stretch the edges */
  width: 250px;
  text-align: center;
  font-weight: bold;
}

Output :

learn code with durgesh images

Different Slice Values

You can control how much of the image is used for borders by changing the slice value:

<div id="borderimg3">Border Slice 50px</div>
<div id="borderimg4">Border Slice 20%</div>
<div id="borderimg5">Border Slice 30%</div>

#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url('border.png') 50 round;
  margin-bottom: 20px;
}

#borderimg4 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url('border.png') 20% round;
  margin-bottom: 20px;
}

#borderimg5 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url('border.png') 30% round;
}

Output :

learn code with durgesh images

Complete HTML Demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn CSS border-image property with examples. Use images as decorative borders around elements with round, stretch, and custom slice values.">
<title>CSS Border Image Example</title>
<style>
  #borderimg1, #borderimg2, #borderimg3, #borderimg4, #borderimg5 {
    width: 250px;
    padding: 20px;
    text-align: center;
    font-weight: bold;
    margin: 20px auto;
  }

  #borderimg1 {
    border: 10px solid transparent;
    border-image: url('border.png') 30 round;
  }

  #borderimg2 {
    border: 10px solid transparent;
    border-image: url('border.png') 30 stretch;
  }

  #borderimg3 {
    border: 10px solid transparent;
    border-image: url('border.png') 50 round;
  }

  #borderimg4 {
    border: 10px solid transparent;
    border-image: url('border.png') 20% round;
  }

  #borderimg5 {
    border: 10px solid transparent;
    border-image: url('border.png') 30% round;
  }
</style>
</head>
<body>

  <div id="borderimg1">Border Image Rounded</div>
  <div id="borderimg2">Border Image Stretched</div>
  <div id="borderimg3">Border Slice 50px</div>
  <div id="borderimg4">Border Slice 20%</div>
  <div id="borderimg5">Border Slice 30%</div>

</body>
</html>

 

Article 0 of 0