How to Make Repeating Border Images

Programming - Mar 31, 2024

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.

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:

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:

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.

Previous Next
We respect the property rights of others, and are always careful not to infringe on their rights, so authors and publishing houses have the right to demand that an article or book download link be removed from the site. If you find an article or book of yours and do not agree to the posting of a download link, or you have a suggestion or complaint, write to us through the Contact Us .
Read More