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-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).
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.