Rounded Corners in CSS3

strong>Since it’s been snowing in Nottingham today and I’ve come down with a cold, I’ve been staying indoors, Although during College, all of us have been playing in the snow (Don’t judge, we’re all still young at heart!) but I’ve been playing around with the rounded corners effect in CSS3, now in my article Getting ready for CSS3 I listed a few major additions that CSS3 will bring to the web, I mentioned Shadows, multiple backgrounds and some more, but another great addition in CSS3 will be rounded corners.

Before you read on you must be aware that support for CSS3 in browsers is scattered all over the place, to be specific only Mozilla and Safari browser users will be able to view the rounded corners effect correctly, because Mozilla is using it’s own method of border-radius and Safari is using the Web-Kit, which has various CSS3 elements bundled in. Im unsure if any other browsers have the border-radius element or any of the web-kits built in, so if you can’t see the rounded effect the reason for it is your browser doesn’t support it! However if you do find browsers other than Mozilla or Safari supporting the border-radius element, message me

Declarations in Mozilla:

CSS3 is mainly present in Mozilla and Safari, we already know this, but to create rounded corners mozilla does not use the same methods as Safari, infact Mozilla uses different declarations:

-moz-border-radius: 10px;  /*Produces Fully Rounded Effect*/
-moz-border-radius-topleft:10px;  /*Top Left Corner Rounded*/
-moz-border-radius-topright:10px;  /*Top Right Corner Rounded*/
-moz-border-radius-bottomleft:10px;  /*Bottom Left Corner Rounded*/
-moz-border-radius-bottomright:10px;  /*Bottom right Corner Rounded*/

Declarations in Safari:

Safari is using the traditional web-kit so the declarations will differ to mozilla’s:

-webkit-border-radius: 10px;  /*Produces fully rounded effect*/
-webkit-border-top-left-radius:10px;  /*Top Left Corner Rounded*/
-webkit-border-top-right-radius:10px;  /*Top Right Corner Rounded*/
-webkit-border-bottom-left-radius:10px;;  /*Bottom Left Corner Rounded*/
-webkit-border-bottom-right-radius:10px;  /*Bottom Right Corner Rounded*/

(Noticed how the Syntax Highlighter can not highlight any of the webkit or moz attributes as they are strictly CSS3, again the support for CSS3 isn’t 100% yet)

Creating rounded borders:

Having to include two different declarations in your CSS code is going to get annoying, but if we reference to CSS2 the only way to get rounded corners currently is to create a image with a rounded edge and then apply it as a class CSS (Usually by using positioning) but CSS3 is making it much simpler, by using a straight attribute to create the effect.

All corners rounded (HTML):

<div id="container1">
 <div class="content">
 <h3>Fully rounded!</h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan iaculis sapien. Vivamus ipsum nulla, sollicitudin eu, iaculis vestibulum, dignissim eget, tortor. Cras elementum eros et mauris. Aliquam ut nibh id magna pellentesque faucibus. Cras purus velit, venenatis eu, dapibus ac, sodales ut, nisl. Phasellus volutpat pellentesque lectus. Aliquam sit amet felis vitae mauris dictum laoreet. Mauris vel neque sit amet justo facilisis ultricies. Duis tempus sem sit amet purus. Donec commodo posuere nulla. Donec euismod sollicitudin arcu.</p>

 <p><strong><em>All of the corners are rounded</em></strong></p>
 </div>
</div>

Apply this CSS to get the effect:

#container1 {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
width:500px;
background:#eeeeee;
border-color:#DEDEDE;
}

.content {
padding: 10px;
}

The Result:

All corners but one rounded (HTML):

<div id="container2">
 <div class="content">
 <h3>Three Quarter Rounded</h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan iaculis sapien. Vivamus ipsum nulla, sollicitudin eu, iaculis vestibulum, dignissim eget, tortor. Cras elementum eros et mauris. Aliquam ut nibh id magna pellentesque faucibus. Cras purus velit, venenatis eu, dapibus ac, sodales ut, nisl. Phasellus volutpat pellentesque lectus. Aliquam sit amet felis vitae mauris dictum laoreet. Mauris vel neque sit amet justo facilisis ultricies. Duis tempus sem sit amet purus. Donec commodo posuere nulla. Donec euismod sollicitudin arcu.</p>
 <p><strong><em>All corners beside the bottom left are rounded</em></strong></p>

 </div>
</div>

Apply this CSS to get the effect:

#container2 {
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius:10px;
border: 1px solid #000;
width:500px;
background:#e7e7e7;
border-color:#DEDEDE;
}

.content {
padding:10px;
}

The Result:

Top two corners rounded (HTML):

<div id="container3">
 <div class="content">
 <h3>Half Rounded</h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan iaculis sapien. Vivamus ipsum nulla, sollicitudin eu, iaculis vestibulum, dignissim eget, tortor. Cras elementum eros et mauris. Aliquam ut nibh id magna pellentesque faucibus. Cras purus velit, venenatis eu, dapibus ac, sodales ut, nisl. Phasellus volutpat pellentesque lectus. Aliquam sit amet felis vitae mauris dictum laoreet. Mauris vel neque sit amet justo facilisis ultricies. Duis tempus sem sit amet purus. Donec commodo posuere nulla. Donec euismod sollicitudin arcu.</p>
 <p><strong><em>The top two corners are rounded</em></strong></p>
 </div>
</div>

Apply this CSS to get the effect:

#container3 {
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius:10px;
width:500px;
background:#eeeeee;
border-color:#DEDEDE;
}

.content {
padding:10px;
}

The Result:

Left corner rounded (HTML):

<div id="container4">
 <div class="content">
 <h3>Quarter Rounded</h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan iaculis sapien. Vivamus ipsum nulla, sollicitudin eu, iaculis vestibulum, dignissim eget, tortor. Cras elementum eros et mauris. Aliquam ut nibh id magna pellentesque faucibus. Cras purus velit, venenatis eu, dapibus ac, sodales ut, nisl. Phasellus volutpat pellentesque lectus. Aliquam sit amet felis vitae mauris dictum laoreet. Mauris vel neque sit amet justo facilisis ultricies. Duis tempus sem sit amet purus. Donec commodo posuere nulla. Donec euismod sollicitudin arcu.</p>
 <p><strong><em>The top left corner is rounded</em></strong></p>
 </div>
</div>

Apply this CSS to get the effect:

#container4 {
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
width:500px;
background:#e7e7e7;
border-color:#DEDEDE;
}

.content {
padding:10px;
}

The Result:

All the examples shown display a equal rounded corner effect, but because each corner can be defined by the relative attribute you can make unequal rounding if you wanted to.

This is just one of the many great additions in CSS3. For more information on CSS3 head over to CSS3.info to get the latest updates on CSS3 and also more examples of great additions in CSS3

View the Rounded Corner example in this tutorial