[Update 5/25/2011: Check out my border-image generator for Polaroid-like photos!]
CSS border images work in the most bizarrely beautiful way, with a single image being sliced into 9 pieces and used to surround our wonderful content with whatever we please (so long as we’re using compatible browsers-this worked for me on Firefox, Chrome and Safari on the Mac-but we can use regular borders as a fallback).
One thing I wanted to try out was making a wooden frame out of a “wood texture” I found online, and use CSS to display and easily manipulate frame thickness. It’s tedious to put frames around multiple images, especially when you want to test different thicknesses and designs. Even if you don’t want to risk compatibility issues, CSS border-images are a great tool to use when mocking up your design with more efficient trial and error whenever you are putting any image border around your content.
Here is the effect that I got:

Continue reading