How to Make Repeating Border Images

Celý článek

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.

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