by using a child theme<\/a> (or a special CSS area that your theme might designate for such additions).<\/p>\nIn your CSS file (Appearance > Editor > Stylesheet \u2013 style.css), place the following code and save your file.<\/p>\n
.circular-image img {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 width: 300px;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 height: 300px;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 -webkit-border-radius: 150px;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 -moz-border-radius: 150px;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 -ms-border-radius: 150px;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 -o-border-radius: 150px;\r\n border-radius: 150px;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }<\/pre>\nThe 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.<\/p>\n\n
Step 2 \u2013 Wrap Images with DIVs<\/b><\/h2>\n
Once that\u2019s set, go ahead and upload your image as you normally would and place it wherever you\u2019d like (centered, aligned right, etc.).<\/p>\n
Once your image is in place, switch to the \u201cText\u201d view of your editor, place the following around the code you see for your image:<\/p>\n
{code type=php}<\/p>\n
code-for-image<\/div>\n
<\/p>\n
In other words, in all its glorious messiness, it will look something like this:<\/p>\n
\n
![\"code\"](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/08\/code-700x275.jpg\")
<\/div>\n<\/div>\n
You\u2019ll notice that the div class (\u201ccircular-image\u201d) is the same as the identifier in your CSS file. It doesn\u2019t matter what you name it as long as they\u2019re both the same. And of course you\u2019ll want to pick a name that isn\u2019t going to conflict with something already in your CSS file, so just make sure it\u2019s at least a little bit unique.<\/p>\n
Save your post, and that should give you a circular image.<\/p>\n
Important Notes, and an Alternative Method<\/b><\/h2>\n
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 \u2013 300px by 300px. And then I set the border radius as half that\u2014150px. You can change these dimensions if you want something larger or smaller. Just keep the ratio the same\u2014i.e. if you make the size 400px by 400px, make the radius half that by bumping it up to 200px.<\/p>\n
Some of\u00a0 you may already be asking: Can\u2019t I just make the image circular and not set the size? In other words, can\u2019t I let the actual size of the image dictate the size of the circular image?<\/p>\n
Well, yes and no \u2026 maybe.<\/p>\n
Squares vs. Rectangles<\/b><\/h2>\n
It all comes down to the shape of your original image. Is it already a perfect square, or is it a rectangle?<\/p>\n
Because my original image was a rectangle, if I hadn\u2019t set the exact height and width, it would have come out oblong \u2013 which might be cool too. We\u2019ll go over that as well.<\/p>\n
First, however, let\u2019s take a look at what I mean. Here\u2019s my original image without the special CSS code applied to it. You\u2019ll see that the original image is a rectangle, not a perfect square.<\/p>\n
\n
![\"rectangle\"](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/08\/rectangle-700x523.jpg\")
<\/div>\n<\/div>\n
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.<\/p>\n
.circular-image img {\r\n-webkit-border-radius: 50%;\r\n-moz-border-radius: 50%;\r\n-ms-border-radius: 50%;\r\n-o-border-radius: 50%;\r\nborder-radius: 50%;\r\n}<\/pre>\nWhen I do that, here\u2019s the result I get. You\u2019ll notice the image is more oval-shaped\/oblong than the first one, which was a perfect circle.<\/p>\n
\n
![\"oblong\"](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/08\/oblong-700x601.jpg\")
<\/div>\n<\/div>\n
For a better view, here are the two side by side.<\/p>\n
\n
![\"side-by-side\"](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/08\/side-by-side-700x312.jpg\")
<\/div>\n<\/div>\n
Some may actually prefer that look. Or some may prefer one look for some things and the other look for other things. If that\u2019s the case, then just make two different classes and apply them as you like.<\/p>\n\n
More or Nothing<\/b><\/h2>\n
The CSS code for images can get much more complicated than what\u2019s mentioned here\u2014well beyond my understanding\u2014but the above should do the job for many who just want a quick, neat little trick to give their posts a little more variety.<\/p>\n
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\u2019t be hard to test other things out.<\/p>\n
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.<\/p>\n\n
Photo credit: garlandcannon<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"This little trick gives you stylish, rounded images in your posts. <\/p>\n","protected":false},"author":84404,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[16],"tutorials_categories":[],"class_list":["post-119758","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-images"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/119758","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/84404"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=119758"}],"version-history":[{"count":1,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/119758\/revisions"}],"predecessor-version":[{"id":204519,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/119758\/revisions\/204519"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=119758"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=119758"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=119758"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=119758"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"round-image\"](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/08\/round-image-700x624.jpg\")
<\/div>\n<\/div>\n