Revisiting CSS border-image | CSS-Tricks
March 22, 2025
Since then, I’ve used border-image regularly. Yet, it remains one of the most underused CSS tools, and I can’t, for the life of me, figure out why. Is it possible that people steer clear of border-image because its syntax is awkward and unintuitive? Perhaps it’s because most explanations don’t solve the type of creative implementation problems that most people need to solve. Most likely, it’s both.
Rounded corners on objects as a design feature for the Web has been around a long long time. How we used to do this was create a table, with each corner and edge of the object being a table cell and the content of the object its own cell.
Yikes.
border-image was introduced to enable similar designs (and much more), though it’s not been widely supported as long as I’d have guessed looking at caniuse.com, though my instinct is it was supported well before the first browser versions that caniuse tracks.
border-radius probably replaced most of the common border-image use cases, and so that feature remains significantly under-used. Here Andy Clarke revisits border-image, and considers uses beyond simply rounded-corners.
Related Speakers
