Creating circles and rounded corners with CSS3

27.03.2015 2 min read

All the so called modern browsers support now at least most of CSS3. This gives you lots of freedom with web design without excessive use of images. Previously when you wanted to have rounded corners or make round elements you needed to use images or other of trickery. Now you have border-radius and it's so easy. There are multiple online generators for creating border-radius and other CSS3 effects, so you don't even have to remember all the details. I use this property for many things, including creating round images and nicely rounded input buttons. In this post you can find a few ideas of what you can do with border-radius. Please note that in these examples I have used inline styling. Preferably add all the styling in your stylesheet.

As mentioned above, you can create nice buttons with border-radius. For a rounded submit button you might want to use a small border-radius, such as 6px. Here's an example of one:

I made it like this:

<input style="-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; background: #e7742e; height: 30px; border: none; font-size: 15px;" type="submit" value="Button"></input>

It works in a similar way for text inputs or textareas:

<input style="-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 4px; border: 1px solid #aaa; width: 150px; font-size: 17px;" type="text" value=""></input>

Of course, you can create rounded corners for other elements too, such as divs. Plus you can add other nifty effects to make things even more fun. How about making a box with inset shadow?

<div style="-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: 1px solid #333; padding: 20px 0px 20px 0px; box-shadow: 1px 1px 5px #888 inset; width: 70%; text-align: center;">Box with rounded corners and inset shadow</div>

You can also round only selected corners. Such as here:

<div style="-webkit-border-top-left-radius: 30px; -webkit-border-bottom-right-radius: 30px; -moz-border-radius-topleft: 30px; -moz-border-radius-bottomright: 30px; border-top-left-radius: 30px; border-bottom-right-radius: 30px; border: 1px solid #333; padding: 20px 0px 20px 0px; width: 70%; text-align: center;">Box with two rounded corners</div>

How about those circles? You can create a circle from pretty much any element, as long as the element is square:

That's accomplished by this:

<div style="-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: #d67c7e; width: 150px; height: 150px; text-align: center;">Circle</div>

Actually a non-square element isn't that bad either. It creates an oval:

<pre lclass="brush: php; auto-links: false; gutter: false;"><div style="-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: #d67c7e; width: 150px; height: 80px; text-align: center;">Oval</div>

Or:

<div style="-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: #d67c7e; width: 150px; height: 250px; text-align: center;">Oval</div>

As you can see from the examples above, border-radius can be used for many things and in many ways. You don't need to use images to accomplish these effects and that makes your website not only faster to load but also more accessible and usable.

This is a reader supported blog without paywalls and advertisement. If you appreciate my work and want to help me rewild the internet, please consider becoming a free or paid patron today. I can't do this without the support of readers like you. So if you can to contribute financially, I would really appreciate your help.

Join free or paid

• Mobile-friendly for SEO
• Characteristics of highly shareable blog articles