🖼️ CSS Tutorial: border-image-source

📌 Introduction

The border-image-source property in CSS allows you to use an image (PNG, JPG, SVG, etc.) as a border instead of the standard solid/dashed/dotted styles. This opens up creative possibilities such as decorative frames, patterned borders, and unique UI components. 🎨 It is part of the border-image module and works together with properties likeborder-image-slice, border-image-repeat, and more.

🎯 What Does border-image-source Do?

  • Defines the image file used to create the border 🖼️
  • Allows vector images (SVG) for scalable borders 📏
  • Enables creative decorative frames 🎨
  • Works only when border-style is not none ⚠️

✨ Syntax

Syntax

selector {
  border-image-source: url("path/to/image.png") | none;
}

Note

To display the border image, you must define a border style and border width:
Example: border: 20px solid transparent;

🧩 Accepted Values

1. url()

Uses an external image file.

Basic Example

.box {
  border: 20px solid transparent;
  border-image-source: url("border-frame.png");
}

2. none

Disables the border image.

None Example

border-image-source: none;

3. Gradients (Yes, supported!)

You can use CSS gradients as border images.

Gradient Example

.gradient-border {
  border: 20px solid transparent;
  border-image-source: linear-gradient(45deg, #ff5f6d, #ffc371);
}

🔥 Complete Border Image Example

Usually, you use border-image-source with border-image-slice to slice the image into border regions.

Full Border Image Example

.frame {
  border: 30px solid transparent;
  border-image-source: url("frame.png");
  border-image-slice: 30 fill;
  border-image-repeat: stretch;
}

Further details can be found at: https://dummyimage.com/900x220/eeeeee/000000&text=Border+Image+Example

🧩 How It Works Together

To create a full border image, combine these:

  • border-image-source → sets the image
  • border-image-slice → divides the image
  • border-image-width → border thickness
  • border-image-outset → pushes image outward
  • border-image-repeat → stretch / repeat / round

📊 Comparison Table

PropertyPurpose
border-image-sourceDefines the image used for the border
border-image-sliceControls how the image is divided
border-image-repeatDefines how image pieces are repeated
border-image-widthControls thickness
border-imageShorthand combining all the above

🔥 Real-World Use Cases

1. Decorative Card Frame

Decorative Frame

.card {
  border: 25px solid transparent;
  border-image-source: url("ornament.png");
  border-image-slice: 40;
}

2. Gradient Border

Gradient Border

.gradient {
  border: 12px solid transparent;
  border-image-source: linear-gradient(to right, #6a11cb, #2575fc);
  border-image-slice: 1;
}

3. Repeating Pattern Border

Pattern Repeat

.pattern {
  border: 18px solid transparent;
  border-image-source: url("pattern.png");
  border-image-slice: 20;
  border-image-repeat: repeat;
}

🖼️ Visual Demo

Further details can be found at: https://dummyimage.com/900x250/eeeeee/000000&text=border-image-source+demo

>>“Creative borders can transform simple layouts into expressive, elegant designs.” ✨

🎉 Conclusion

The border-image-source property is the foundation of CSS image borders. It allows you to turn images or gradients into beautiful, custom borders with endless possibilities. Combine it with border-image-slice, border-image-repeat, andborder-image-width for full control. 🚀 Perfect for advanced UI designs, decorative frames, and creative interfaces!