Once in a while you see something that shakes things to their foundations. Something disruptive–like the birth of social media, or micro-stock. I really want to discover something like that. This is not that. This is just something cool.

Right now, there are lots of design trends, most notably the vintage signage-inpsired type movement (which I called as a de-facto protest movement to micro-stock back in about 2007), and I suppose responsive web design coupled with parallax jQuery is also notable. But something big has just happened, and I chalk it up to… Microsoft. Enter the circle.

Yep. I said that right. Circles–on the web. I’ve been designing websites since at least 2001, and anytime you wanted a circle, you opened Photoshop, made graphic and integrated it. After being yelled at by numerous coders for designs that were to hard to create as tables (snicker) I really just embraced the square. Nice clean grids, maybe if I felt risqué perhaps a 16:9 pano. Well…square no more!

All you need to do is open your CSS file and add this:

img.makeMeACircle {
   -moz-border-radius: 50%;
   -webkit-border-radius: 50%;
   border-radius: 50%;

That’s it.  Here is an example:




It gets a little funky when you have rectangles. An example can be seen here, but I’ve kind of embraced this little snippet’s quirkiness at least for now. I’m sure there would be a million variations, should you be so inclined, but I look for boilerplate I can add into a framework for the long term.

But what about Microsoft? Well, I tested this in Internet Explorer “Edge” and it works down to IE8. That means this is pretty well a green light to use this as desired, unless it’s a key element to a design. As a part of progressive enhancement, fine. But use it everywhere and bet the farm if it doesn’t work, perhaps not… yet.

Pin It on Pinterest

Share This