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.
I made a web tool for designing and exporting cool lo-fi border decorations.
— max (@maxbittker) March 2, 2020
It’s really fun!! Please try it out, and reply with screenshots if you design something you like:https://t.co/XKFCJMAU1s
📀⛓📀⛓📀⛓📀⛓📀 pic.twitter.com/6IWQuUpp2B
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:
I really love this. so fun. pic.twitter.com/2Nt3gmngyi
— joshua jenkins (@joshuajenkins) March 2, 2020
It’s amazing to see how much variety can come from a few 9x9 bit boxes.
it make me happy pic.twitter.com/hejum4GOKj
— frysolation (@joshuafry) March 2, 2020
Some are recognizable as beloved borders of my past. This Pokemon one stands out especially.
Thank you for the tool, I had to do this one, brings old memories pic.twitter.com/QKAUN4HS8z
— Eiyeron (@Eiyeron) March 2, 2020
:)
Smiley border.
— Danielle Baskin (@djbaskin) March 2, 2020
Also if you make a 25x25 version it can be hidden QR code border! pic.twitter.com/9KPRnKqWLj
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!