Most web designers use use border-radius for rounding the corners on navigation buttons, div containers and the like. With a little bit of creativity we can also apply the property to images, to create the effect of a simple mask.

First, let’s take an image and apply a standard border to it via a class.

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

Then, add a border-radius of a few dozen pixels to curve the corners:

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

To smooth the effect, apply overflow: hidden while making the border transparent. I'll also add a subtle box-shadow and a slight rotation:

.ghost-town {
	width: 350px; height: 263px;
	border-radius: 30px;
	overflow: hidden;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
	transform: rotate(4deg) translateZ(0);
}

The (now invisible) border clips the corners of the image nicely, while the translateZ works to smooth the rendering of the rotated image.

We could extend this to create the ever-popular “faces inside circles” motif shown at the top of this page. In this case, I'll size a container element and place the visual content as a background-image within it:

.happyface {
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid #000;
    width: 13rem;
    height: 13rem;
    background-image: url('happy-face.jpg');
    background-size: cover;
}

By sizing the border-radius as 50%, and making the container equal in width and height, we create the impression of perfect circles.

Photograph of the town of Berlin, Texas, by Barclay Nix, licensed under Creative Commons, face images via the (sadly, discontinued) FaceBox.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.