There are many online articles on border-image, but I’ve found that few of them are terribly practical. Following up on my technical explanation of the property, I’ll try to reverse that that trend by showing how to create a postage stamp from a simple image with border-image.

Why would we do such a thing? Well, there is usually more than one stamp on an envelope. If we want to present those on a web page, we have two choices: transform the images into postage stamps by using some kind of batch process in PhotoShop, or use CSS to add a border. I’d argue that the latter gives the web developer much more flexibility.

First, we need to make our border. In this case, we need a representation of a small section of each side. There are many ways we could create this, but I’ll use a  30 × 30 pixel canvas with a simple mask of four half circles, one at each edge, to create a 24-bit PNG with an alpha mask. I’ll then add guides to determine where to slice the image into its sides and corners, as I showed in the previous article.

(You could make the resulting file size of the PNG even smaller by processing it through Fireworks).

Now we’ll apply the PNG as a border-image:

.stamp {
	width: 200px;
	height: 148px;
	border-image: url(stamp-border.png) 8;
	border-width: 8px;
}

Because each side has the exact same dimension, I can shortcut them. You’ll find that each side is stretched by default; instead, we want the pattern for each side to be repeated in complete iterations. The full code would be:

.stamp {
	width: 200px;
	height: 148px;
	border-image: url(stamp-border.png) 8 round;
	border-width: 8px;
	border-style: solid; 
}

(Oddly, Firefox requires both a separate border-width and a border-style, even though the width has already been declared and the style is determined by the image).

Now I can apply the class to any image that I want to give the appearance of a postage stamp, as shown in the result at the top of this article.

Frame created from the wonderful postage mark PhotoShop brushes collated by Spoon Graphics.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/ByMJRK