Squaring the circle is a mathematical phantasm born in antiquity and proved to be impossible in the 19th century; it consists in attempting to draw a square with the same area as a circle.
Today we’ll turn the quadrature problem upside down and try to convert a square image into a round one.
Round images aren’t something new to the web (although they’re rather “fake-round”, using transparency), but they have to face some cross-browser compatibility issues (the famous PNG alpha transparency bug in IE6). Anyhow, I don’t intend to provide another fix to this bug, nor to deal with .png. I just want to share a little trick that will turn a common .jpg into a round image using CSS3 only.
Please note: the codes listed bellow will only work in Mozilla, Safari and Chrome.
First, we need a square image.
Kitty - square image
Second, we nest the image inside a div that we style; then, hocup pocus, we’ll see a nice round picture:
The code for the image above:
The trick here is to use the image as background for the empty div. If you actually place the picture inside the div, using the img tag, it will simply not work (at least using this particular style).
Using this tip with WordPress
If you want to have round images displayed on single posts, you only need to use a code like the one above.
On the other hand, if you want to automatically have such images displayed on the main page, you’ll need a little php. To make the things easier, we’ll borrow a little script from Narudin Jauhari (I first saw it in his Hamasaki theme*) and modify it:
<?php
$id =$post->ID;
$the_content =$wpdb->get_var("SELECT post_content FROM $wpdb->posts WHERE ID = $id");
$pattern = ‘!<img.*?src="(.*?)"!’;
preg_match_all($pattern, $the_content, $matches);
$image_src = $matches[’1′][0];
?>
<div class="round-thumbnail" style=" width:200px;height:200px;border:1px solid #ccc;-moz-border-radius:200px;-webkit-border-radius:100px;background: url(<?php if($image_src != ”) { echo $image_src; } else { ?><?php bloginfo(‘template_directory’); ?>/images/no-image.jpg<?php } ?>) no-repeat;"></div>
Just drop this script inside of the loop and style it in a manner that suits your blog design.
*Please note that this piece of code was licenced under Creative Commons attribution – share alike (CC-BY-SA 2.0), which is incompatible with GNU-GPL.
The problem with this script is that it won’t resize the image, so you’ll have only a part of the actual picture displayed on the homepage; also, the image won’t be clickable.
Bonus 1: Clickable HTML round images with PHP and CSS
This tip is also automatic, working with WordPress, and using php. The final result isn’t spectacular, but but it can be tastefully styled.
First, we need a php script that will automatically call an image on the frontpage, for instance this beautiful function written by c.bavota.
Second, we need to nest the call in a div:
<?php getImage(’1′); ?>
</div>
Finally, we style the whole thing:
.himg img{width:60px;height:60px;margin:0;padding:15px;-moz-border-radius:150px;}
(It is important to set widths and heights for both div and img; otherwise, the image won’t be resized.)
The result will look like this:
round clickable image
Of course, you can change the style in any way you want.
This trick works best when the pictures background has the same color as the image’s background (yes, they’re different).
Bonus 2: Clickable HTML round images with CSS only
That’s right, with CSS only. For the beginning, let’s upload an image:
square image
Now let’s make this image clickable and round:
The script for the image above:
I really hope you enjoyed this post.
Cheers.
For some reason your examples aren’t working in Safari (I’m running Safari 4).
Thanks, Colin, I had forgotten that WebKit interprets radius as radius while Gecko interprets it as diameter. I’ve updated the post (and the snipets).
I have found pure css technique to make rounded curves. This works in IE6 also.
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
Thanks for sharing
A little remark, though – the technique isn’t pure css, it’s css + javascript.
I could only get this to work when I put the CSS code in with the html, but not when I called it in the CSS file. Does it have to be in the HTML?