### Revisiting the Power of CSS `border-image`
In a previous article, [“Revisiting CSS Multi-Column Layout”](https://css-tricks.com/revisiting-css-multi-column-layout/), I reflected on how nearly two decades have passed since I wrote my first book, *Transcending CSS*. Back then, I explored emerging CSS properties and their potential.
A decade later, I wrote the [*Hardboiled Web Design Fifth Anniversary Edition*](https://stuffandnonsense.co.uk/hardboiled-web-design), covering similar topics and introducing the CSS `border-image` property.
**Hint:** You can read an updated version, *[Transcending CSS Revisited](https://stuffandnonsense.co.uk/transcending-css-revisited/index.html)*, for free online. *Hardboiled Web Design* is available in [my bookshop](https://stuffandnonsense.co.uk/books).
I was excited about the creative possibilities `border-image` offered—allowing images to be applied to the borders of any element, including table cells and rows (unless their borders were collapsed).
Since then, I’ve used `border-image` frequently, yet it remains one of the most underutilized CSS properties. Why is that? Perhaps its syntax is unintuitive, or most explanations fail to address real-world creative implementations. Likely, it’s both.
### A Practical Use Case: Designing for Mike Worth
Recently, I worked on a new website for Emmy-winning game composer Mike Worth. He wanted a visually rich design that showcased his work, and `border-image` played a key role in bringing that vision to life.
*Design by [Andy Clarke, Stuff & Nonsense](https://stuffandnonsense.co.uk). Mike Worth’s website launches in April 2025, but you can [preview examples on CodePen](https://codepen.io/collection/QbWmYL).*
—
## Understanding `border-image`
### The Basics
Most explanations of `border-image` start with this shorthand syntax:
“`css
border-image: [source] [slice]/[width]/[outset] [repeat];
“`
However, breaking it down into individual properties makes it easier to understand.
### Setting the Image Source
The `border-image-source` property defines the image or gradient used for the border:
“`css
border-image-source: url(‘/img/scroll.png’);
“`
For SVGs, you can reference an external file:
“`css
border-image-source: url(‘/img/scroll.svg’);
“`
Or embed the SVG directly using a data URI:
“`css
border-image-source: url(‘data:image/svg+xml;utf8,…’);
“`
You can even use a CSS-generated gradient:
“`css
border-image-source: conical-gradient(…);
“`
**Tip:** A `border-image` sits above the element’s background and `box-shadow` but below its content.
### Slicing the Image
Once the source is set, the image is divided into nine sections using `border-image-slice`:
“`css
border-image-slice: 65;
“`
This sets equal slice sizes. You can also define different values for each edge (top, right, bottom, left):
“`css
border-image-slice: 65 65 115 125;
“`
To ensure the center of the image fills the element, add the `fill` keyword:
“`css
border-image-slice: 65 65 115 125 fill;
“`
### Controlling Image Repeats
The `border-image-repeat` property determines how the slices fill the border:
“`css
border-image-repeat: stretch; /* Stretches the image */
border-image-repeat: repeat; /* Tiles the image */
border-image-repeat: round; /* Adjusts size to fit */
border-image-repeat: space; /* Spaces out repeats */
“`
To apply different behaviors to horizontal and vertical edges:
“`css
border-image-repeat: stretch round;
“`
### Expanding Beyond the Border
Use `border-image-outset` to extend the image beyond the element’s border:
“`css
border-image-outset: 10px; /* Evenly expands all sides */
border-image-outset: 20px 10px; /* Different values per side */
“`
—
## `border-image`
