I am about to start a new series on masking techniques for web content, one that will eventually tie into the ongoing SVG series. But we’re going to start simply, with a short lesson inspired by a question from a student in the CSS class I taught last night.

I have addressed border-radius previously. Most web designers use the property for rounding the corners on navigation buttons, divs and the like, but with a little bit of creativity we can also apply it to images, even video, to create the effect of a simple mask.

First, let’s take an image and apply a standard border to it via a class. (Here I’m using a photograph of the town of Berlin, Texas, by Barclay Nix, licensed under Creative Commons.)

1. .ghost-town { width: 350px; height: 263px; border: 2px solid red; }

Good so far. Now let’s add a border-radius of a few dozen pixels to curve the corners (I’ll add coverage for order browsers with vendor prefixes later):

1. .ghost-town { width: 350px; height: 263px; border: 2px solid red;
2. border-radius:30px; }

On older browsers, the larger the border-radius gets, the more the original corners of the image “stick out”; in newer browsers, the corners are turned, but the border may be applied unevenly. One way to fix this would be to thicken the border to compensate, but that usually is an ugly solution. Instead, we’ll do remarkably simple trick, while adding a few other CSS3 effects. While we could keep the border-color. Technically, specifying any color is optional, so let’s drop that when we proceed, and apply overflow: hidden at the same time.

1. .ghost-town { width: 350px; height: 263px;
2. -moz-border-radius:30px; -webkit-border-radius:30px;
3. border-radius:30px; overflow: hidden;
4. -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
5. -moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
6. box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
7. -moz-transform: rotate(4deg); -webkit-transform: rotate(4deg);
8. -o-transform: rotate(4deg); -ms-transform: rotate(4deg);
9. transform: rotate(4deg); }

The (now invisible) border clips the corners of the image, and the box-shadow we added nicely follows its new curves, as you can see at the top of this article. Applying this declaration as a class (without the width and height, of course, unless all of your images happen to be the same size) is an easy way to make your images start to look like old-time photographs.