border images

how to use

copy the CSS, paste it into your stylesheet, then add the class to the HTML element(s) you want to style. the images are base64 encoded, so you don't need to download or hotlink any files.

• color and background only affect the colors within the container, not the border itself. to change the border, download and edit the .png, then replace the border-image-source with the path to your new file.
• image-rendering: pixelated; keeps the pixel art crisp as it gets scaled up or zoomed in. by default, any images placed within these containers will also have pixelated rendering. if you don't want that, add .border-name-here img { image-rendering: auto; } to your stylesheet.
• when changing border-image-width, keep the values mutiples of the border-image-slice values for the best results!

from videogames

inspiration zone: deathgenerator.com

from embroidery

from mac themes

inspiration zone: macthemes.garden

gradients

more border image collections

• broider: tool for creating pixel borders, plus a gallery of user-submitted creations
• vile magus: botanical, animal, and woven borders
• doll archive: botanical and picture frame borders
• fool lovers: lace and floral borders
• codefoodpixels: pixelated rounded corner generator (uses clip-path, not border-image)
• css-tricks article on animating css border images