Broider your borders with this nifty tool!

The aptly named Broider by Max Bittker is a nifty tool for creating, and decorating, your borders.

Broider allows you to paint your borders in a one-bit style (the bit is either on or off, no colors), with a few small tools to help keep things in line: a 9x9 grid, an undo button (for people like me who never get things right the first time), and a little lock button that will keep all of your painting symmetrical.

The secret sauce behind Broider’s wonderful effect is utilizing CSS’s border-image property… honestly, not something that you see every day. The border-image property allows you to divide an image up into eight segments, one for each of the corners, and one for each of the edges (which will repeat). It’s got a lot of options that can make for a super unique style.

It’s easy to be turned off by the idea of adding a border-image due to it needing an unwanted additional asset. However, Broider takes care of that by nesting your created image in base64 format, so it can sit pretty in your CSS. Just copy and paste and you’re good to go!

Here are a few of my favorite designs:

It’s amazing to see how much variety can come from a few 9x9 bit boxes.

Some are recognizable as beloved borders of my past. This Pokemon one stands out especially.

:)

Max, who’s project, SandSpiel, was previously covered, has yet again made his work open-source. It’s well worth checking out if you want to learn a little TypeScript!

➢ Broider
➢ Max Bittker on Twitter