CSS Border-Image

CSS border-image allows you to use an image to wrap any HTML element.

  • You could have borders from colors or solid lines, if you like - but you could take an image, and use it as slices for the top, right, bottom, and left borders of a box.
  • To make your designs more stylish, artistic and flexible.

Basic Syntax


          selector  {
               border : [border-width] solid transparent ;
               border-image : url(image-path) slice scale repeat ;
          }

Example 1: Simple Border Image

HTML


          < div   class=  "border-box"  >  This box has an image border < /div >

CSS


          .border-box  {
               border : 10px solid transparent ;
               border-image : url('border.png') 30 round ;
               padding : 20px ;
               width : 300px;
          }

Example in action (requires `border.png`):

This box has an image border
Note: You will need to replace the `url()` in the border image examples with the path to your border images for there to be any visual effect. I used placeholder images for demoing purposes.

In this example:

  • url('border.png') — the image used as the border.
  • 30 — slices the image 30px from each side.
  • round — repeats the image to fit the border area.

Step-by-Step Explanation

border

Before using border-image, you must first create a border, like (e.g., 10px solid) — so that there is the width available for the image in the border.

border-image-source

The image you want to use:


          border-image-source : url("border.png");

border-image-slice

This cuts the image into 9 parts: 4 corners, 4 sides, and 1 center.

border-image-slice: 30;

Think of it like this:

The image is cut like a 3x3 grid.

border-image-repeat

How the image should behave:

  • stretch – stretches the image
  • repeat – tiles it
  • round – repeats and adjusts to fit
  • space – repeats with space in between

          border-image-repeat : round;

Example 2: Fancy Frame Box

HTML


           < div   class=  "fancy-box"  >  Elegant Frame < /div >

CSS


          .fancy-box  {
               border : 20px solid ;
               border-image-source : url("frame-border.png") ;
               border-image-slice : 40;
               border-image-repeat : stretch;
               border-image-width : 20px;
               border-image-outset : 0;
          }

Example in action (requires `frame-border.png`):

Elegant Frame

This looks like a picture frame around your content!

Example 3: All Properties Together

CSS


          .box  {
               border : 15px solid transparent ;
               border-image-source : url("border-image.png") ;
               border-image-slice : 25 30 25 30;
               border-image-width : 15px;
               border-image-outset : 2px;
               border-image-repeat : repeat;
          }

border-image-slice: top right bottom left

You can control each side individually!

Example in action (requires `border-image.png`):

Box with all border-image properties

Full Breakdown of border-image Properties

Property Description
border-image-source The image to be used
border-image-slice How much to slice from edges
border-image-width Width of the border image
border-image-outset How far image extends beyond box
border-image-repeat Repeat/stretch/round/space
border-image Shorthand for all in one line

Example 4: Shorthand Usage

CSS

 
          .box  {
          border : 15px solid transparent ;
          border-image : url("border.png") 30 round ;
          }

This is short for:

  • border-image-source : url("border.png") ;
  • border-image-slice : 30;
  • border-image-repeat : round;

Example in action (requires `border.png`):

Shorthand Border Image Box

Real-Life Use Cases

  • Decorative content boxes
  • Custom-designed frames around images
  • Unique blog cards
  • Fancy headings or banners
  • Artistic resumes or portfolios

Bonus: Border-Image Generator Tool

You can try it online with visual tools:

https://border-image.com/

Just upload your border image and get the CSS code instantly!

Tips for Beginners

  • Always define border-width to see the effect.
  • Make sure your image has enough space for slicing.
  • Test with different repeat and slice values.
  • Avoid too large image borders — they can stretch badly.
  • Use PNG or SVG for clean results.

Conclusion

CSS border-image may look a bit complex at first,

but once you get the concept of slicing and applying the image to the border —

it opens up creative possibilities that solid borders can never achieve.

Use it wisely to add elegance to your designs

And remember, Bhai — coding is not just logic, it’s art too.

Try it Yourself