How to create round images

Round imageRound images are a recent trend in web design, one I rather like if it’s used in moderation. CSS3 lets us to transform a square image into a round one with just few lines of code.

In this example, we will use round images as thumbnails for a “Staff” section of a hypothetical website. It’s a nice way to present staffer’s pictures and surely you have seen it before on the Internet.

What do we need

This code works with any Design. Actually, we’re using Sandvox but these principles are the same regardless of the platform.

What we need is just a square image. We could use a rectangle-sized image but things would be much more complex. So, choose your photo, crop it in a 1:1 ratio if it isn’t already a square and that’s it.

In Sandvox

As I said, we’re creating a “corporate” staff section. Of course, you can use this technique with any image no matter how large, no matter where it is (sidebar, callout, a gallery…). If your image is already in its place, you can skip this part.

Add your picture to the page where it belongs, as you usually do. In this case inside the main text, as an inline image:

Add your image

Make it float on the left, allowing the text to flow around it. Then, in the Inspector, switch to the Metrics tab and set the image size to something smaller. I choose 128px in size. Choose an even number, because we’ll need to divide it by 2 later.

Resize your image

Now move to the Media tab and add an Accessibility Description. This is the text that is displayed when the image, for any reason, is unavailable to the user. It’s my picture and I’m my only employee, so I wrote “self portrait”:

Add the description

The code

Now it’s time to add some code. Choose “Site Code Injection…” from the “Edit” menu and click on the “Style Sheet” tab.

We’ll use this code:

img[alt="self portrait"] {
    border-radius: 64px;
}

which means:

when you meet an image whose “alt” attribute is “self portrait” apply a radius of 64px to its borders.

Since our image is a 128px-sized square, the border will begin exactly at half its height and width, creating a perfect circle.

The “border-radius” property is quite recent. When a new property is created, browsers use their own interpretation to render it until it becomes a standard. Most browsers now accept “border-radius”, but previous versions may not handle it. This is why we need to add what are called “vendor prefixes” to tell each browser that it is allowed to activate its own rendering rule.

So the actual code we’re going to paste is this one:

img[alt="self portrait"] {
    -webkit-border-radius: 64px;
    -moz-border-radius: 64px;
    -ms-border-radius: 64px;
    -o-border-radius: 64px;
    border-radius: 64px;
}

Here it is:

Add the code

Now all compatible versions of Safari/Chrome (WebKit based), Mozilla, Internet Explorer and Opera – even if they’re not up-to-date, will render a round image instead of a square.

Variations

If everything goes as expected, this is the result:

The result

You can play with rounded borders as you like. Targeting the “alt” attribute allows to choose exactly the image or images you want to transform.

If, let’s say, you have a list of people you can use the same “alt” attribute for all of them (example: “staffer portrait”). You can also use different “alt” attributes for each one of them (which would be more adherent to official guidelines). In this case, the code must be changed:

img[alt="portrait1"], img[alt="portrait2"], img[alt="portrait3"] {
    -webkit-border-radius: 64px;
    -moz-border-radius: 64px;
    -ms-border-radius: 64px;
    border-radius: 64px;
}

Add as many img[alt="portrait_X"] as needed, separating them with a comma. If you’d like to go a step further, you can also save some chars and write this:

img[alt^="portrait"] {
    -webkit-border-radius: 64px;
    -moz-border-radius: 64px;
    -ms-border-radius: 64px;
    border-radius: 64px;
}

The “^” character means:

Select all images whose “alt” attribute begins with “portrait”.

This code is valid also if you want to apply the same code to different images all around your website, as long as the image size is the same (or as long as you’re ok with the 64px border radius).

And of course, once you efficiently target an image, you can apply whatever code you like. For example, instead of a circular shape you can try a “frame” effect:

img[alt="self portrait"] {
    padding: 3px;
    border:1px solid #CCC;
}

or a shadow:

img[alt="self portrait"] {
    -webkit-box-shadow:0 2px 2px #666;
    -moz-box-shadow:0 2px 2px #666;
    -ms-box-shadow:0 2px 2px #666;
    -o-box-shadow:0 2px 2px #666;
    box-shadow:0 2px 2px #666;
}

or just rounded corners:

img[alt="self portrait"] {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

Possibilities are limitless, just use your taste and your inspiration.

Older browsers don’t support this way of targeting images, so consider this technique always a way to deliver a more pleasant result but don’t rely on it for essential features.