Select Page

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.

Redpoint Creative is located in Red Deer, Alberta and offers mascot illustration and interpretive design to all of Alberta.

A Division of Olestaats Holdings inc.

Get In Touch

Let us know about your project, or just ask a question …