CSS Border Images
border-image lets you use an SVG or PNG as a stretched, sliced, or repeated border. Useful for ornate frames and gradient borders.
border-image patterns
EXAMPLE
/* The shorthand */
.frame {
border: 12px solid transparent; /* width + transparent fallback */
border-image: url('/border.png') 30 round;
/* ^ ^
* slice (px from each edge of source image)
* repeat behaviour: stretch | repeat | round | space
*/
}
/* Full longhand */
.box {
border-style: solid;
border-width: 12px;
border-image-source: url('/border-9slice.png');
border-image-slice: 30 fill; /* fill keeps the centre */
border-image-repeat: round;
border-image-outset: 0;
}
/* Gradient border using border-image */
.gradient-border {
border: 4px solid transparent;
border-image: linear-gradient(45deg, #ec4899, #8b5cf6, #3b82f6) 1;
}
/* Conic gradient border for fancy effects */
.conic {
border: 6px solid transparent;
border-image: conic-gradient(from 0deg, red, orange, yellow, green, blue, purple, red) 1;
}
/* Modern alternative: background-clip + multiple backgrounds */
.modern-gradient {
background:
linear-gradient(white, white) padding-box,
linear-gradient(45deg, #ec4899, #8b5cf6, #3b82f6) border-box;
border: 4px solid transparent;
border-radius: 12px;
}
/* Tip: 9-slice scaling for skeuomorphic UIs */
/*
* +----+--------+----+
* | TL | top | TR |
* +----+--------+----+
* | L | center | R |
* +----+--------+----+
* | BL | bottom | BR |
* +----+--------+----+
* Corners do not stretch; edges tile; centre fills.
*/
/* Combine with border-radius - rare and tricky to look right */
.fancy {
border-radius: 12px;
border: 6px solid transparent;
border-image: linear-gradient(45deg, #2563eb, #16a34a) 1;
}
Why it matters
border-image lets you ship ornate frames and gradient borders without preprocessing. For gradient borders specifically, the multi-background trick (background-clip: padding-box vs border-box) gives you rounded corners AND a gradient border - which border-image alone struggles with.
Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.
Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS Border Images</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Set the source image for the border.
.frame { border-image-
: url('frame.png'); }
Where the image comes from.
Discussion
Loading…