How to Make Repeating Border Images


I just saw this cool little site from Max Bittker: broider. You design an image on a 9-slice grid (except the middle part) and it will produce an image for you to use with border-image along with the CSS to copy and paste.

How to Make Repeating Border Images 1

Check out my little design:

The areas of the image ultimately output to a base64 PNG file with the designs in each area. For example, if you just drew in the top-center quadrant, the generated PNG looks like this:

How to Make Repeating Border Images 2

Which gives you a single border like this, which might be just what you want:

On the new ShopTalk Show website, we have a similar effect in a few places, like this:

How to Make Repeating Border Images 3

We did that in a slightly different way. Rather than border-image, we used a background-image and background-repeat: round; That way we could use an image in pretty much the same way, only we had to take the extra step of placing an “inner” element in order to knock out the middle (so it fakes a border).

Like this:

Looking at it now, we probably should have just used border-image, as it can do the same thing and is a bit cleaner. Our Almanac page has more examples.

The post How to Make Repeating Border Images appeared first on CSS-Tricks.

This post was originally posted here

Check out our Starter Sites built with #ToolWeLove including Toolset, Elementor Pro, and Astra Pro.


Share this page
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on email
Pixallus Website Giveaway

We understand COVID has created shifts in many people’s lives. That’s why we’ve decided to giveaway a fully functional website with all the tools you

Read More »
How to Choose WordPress Hosting

Pixallus WordPress Hosting. Simplified. Enjoy blazing fast WordPress website loading speeds and 99.9% uptime. Whether you’re a freelancer, small business, or a large organization, we

Read More »