2 Easy Steps to Giving Images in WordPress a Circular Look with CSS

2 Easy Steps to Giving Images in WordPress a Circular Look with CSS

While not new by any means, circular images definitely seem to be in style these days. Wherever you look, it seems circular images are all around.  … But then again, what else could they be? :)

round-image

Step 1 – Insert Code in CSS File

If you’d like some of your images to take a circular style (as above), it’s not so hard to do. You’ll just need to add a few lines to your CSS file, and then you’ll just need to apply a little bit of code to whichever images you’d like.

Of course it’s always best to make changes to your CSS file by using a child theme (or a special CSS area that your theme might designate for such additions).

In your CSS file (Appearance > Editor > Stylesheet – style.css), place the following code and save your file.

.circular-image img {
               width: 300px;
               height: 300px;
               -webkit-border-radius: 150px;
               -moz-border-radius: 150px;
               -ms-border-radius: 150px;
               -o-border-radius: 150px;
                border-radius: 150px;
                              }

The reason for all those different 150px lines is to account for different browsers. Some say that these days you only need “border-radius: 150px;” but if you want to be extra sure, you can include them all.

Step 2 – Wrap Images with DIVs

Once that’s set, go ahead and upload your image as you normally would and place it wherever you’d like (centered, aligned right, etc.).

Once your image is in place, switch to the “Text” view of your editor, place the following around the code you see for your image:

{code type=php}

code-for-image

 

In other words, in all its glorious messiness, it will look something like this:

code

You’ll notice that the div class (“circular-image”) is the same as the identifier in your CSS file. It doesn’t matter what you name it as long as they’re both the same. And of course you’ll want to pick a name that isn’t going to conflict with something already in your CSS file, so just make sure it’s at least a little bit unique.

Save your post, and that should give you a circular image.

Important Notes, and an Alternative Method

There are a few important things to cover about the code above. I made the image you see above a perfect circle by setting the height and width in my CSS file – 300px by 300px. And then I set the border radius as half that—150px. You can change these dimensions if you want something larger or smaller. Just keep the ratio the same—i.e. if you make the size 400px by 400px, make the radius half that by bumping it up to 200px.

FREE EBOOK
Your step-by-step roadmap to a profitable web dev business. From landing more clients to scaling like crazy.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

FREE EBOOK
Plan, build, and launch your next WP site without a hitch. Our checklist makes the process easy and repeatable.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

Some of  you may already be asking: Can’t I just make the image circular and not set the size? In other words, can’t I let the actual size of the image dictate the size of the circular image?

Well, yes and no … maybe.

Squares vs. Rectangles

It all comes down to the shape of your original image. Is it already a perfect square, or is it a rectangle?

Because my original image was a rectangle, if I hadn’t set the exact height and width, it would have come out oblong – which might be cool too. We’ll go over that as well.

First, however, let’s take a look at what I mean. Here’s my original image without the special CSS code applied to it. You’ll see that the original image is a rectangle, not a perfect square.

rectangle

Now if I wanted to, I could just roll with a border radius of 50% and let the original image size dictate the size of the final circular image. I could put this in my CSS file.

.circular-image img {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}

When I do that, here’s the result I get. You’ll notice the image is more oval-shaped/oblong than the first one, which was a perfect circle.

oblong

For a better view, here are the two side by side.

side-by-side

Some may actually prefer that look. Or some may prefer one look for some things and the other look for other things. If that’s the case, then just make two different classes and apply them as you like.

More or Nothing

The CSS code for images can get much more complicated than what’s mentioned here—well beyond my understanding—but the above should do the job for many who just want a quick, neat little trick to give their posts a little more variety.

If you want to get into more advanced tricks, then just hit up Google for CSS and images. Once you have the basics above in place, it shouldn’t be hard to test other things out.

Of course you might be thinking that one way to get circular images is to just make them that way in a graphics program. And of course you can do that. But if one day the circular craze gets to be a little too much, and you want to revert back to good old-fashioned squares and rectangles, all you need to do is go into your CSS file and put the kibosh to your code.

Photo credit: garlandcannon

Tags: