Practical Ecommerce

Web Design Tips: Rounded Borders in CSS

Consumers often judge online stores by visual aesthetics alone, so Internet shopkeepers are wise to use large appealing images, handsome fonts, and occasionally an eye-pleasing curve.

When that curve is added someplace unexpected, say in a border around a text box or an image, it can be especially impactful. In this Web Design Tips, a recurring Practical eCommerce feature, I’ll show you how to use CSS alone to bend the corners of your site’s border elements. I’ll also give you an update on the World Wide Web Consortium’s (W3C) border-radius property in CSS3 and discuss browser compatibility—since Microsoft’s Internet Explorer trails most other browsers in supporting this property in any form.

Rounded Borders in CSS

As you probably know, CSS stands for cascading style sheets. Basically, CSS are short text documents that serve as a “mechanism for adding style (e.g. fonts, colors, spacing) to web documents,” or so said the W3C in its official description of the standard.

For years, designers have been using images or complex JavaScripts to add rounded corners to boxes and borders. But there is a CSS3 property that effective smoothes out otherwise pointed corners, simply and easily.
The border-radius properties will round the corners of a border. The available tags are border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius, border-radius.
The border-radius tag will take two lengths.

<code>border-radius: 55pt 25pt;
</code>

According to the W3C, “the two length values of the ‘border-radius’ properties define the radii of a quarter ellipse that defines the shape of the corner . The first value is the horizontal radius…if the second length is omitted it is equal to the first (and the corner is thus a quarter circle). If either length is zero, the corner is square, not rounded. The border radius also causes the element’s background to be rounded, even if the border is ‘none’.”

In September 2007, the consortium agreed to shorthand syntax for the border-radius property.

<code>border-radius: TL TR BR BL;
border-radius: TL BL+TR BR;
border-radius: TL+BR TR+BL;
border-radius: ALL;
</code>

Adding the property to your CSS, might produce code like this:

<code>#wrapper { margin: 0px auto; width: 950px; border: #520b05 solid 5px; 25px; border-radius: 25px;</code>

Browser Compatibility

Sounds simple, right? But then we need to talk about browser compatibility. Internet Explorer does not yet support this feature in any form. And, unfortunately, according to the Microsoft website, even IE8 will not support it—we cannot really blame them, CSS3 is still a work in progress. But every other leading browser does support the effect, with some special attention. The result is that you have to repeat yourself a bit, but you can produce the effect, and it is still simple when compared to other methods.

<code>  border-radius: 9px; /* CSS 3 */
  -o-border-radius: 9px; /* Opera */
  -icab-border-radius: 9px; /* iCab */
  -khtml-border-radius: 9px; /* Konqueror */
  -moz-border-radius: 9px; /* Firefox */
  -webkit-border-radius: 9px; /* Safari */
</code>

Video Rounder Border Corners

Summing Up

The CSS3 border-radius property is a quick easy way to spice up your web site’s appearance, but browser compatibility is still a challenge.

Editor’s note: If you have a suggestion for a future edition of Web Design Tips, please email armando@practicalecommerce.com

Resources

Armando Roggio
Armando Roggio
Bio  |  RSS Feed


Get the Practical Ecommerce RSS feed

Comment ( 1 )

  1. brettcito June 4, 2009 Reply

    THANK YOU!!! I’ve read dozens of articles trying to find a practical way to create rounded corners and this is by far the best. No hacks. No JavaScript. No bloated markup. Just dead simple CSS.

    I knew ‘border-radius’ was coming in CSS3, but I didn’t know it was supported yet. Fantastic job on the video and article giving a clear explanation of how to make this work. Well done!

Email Newsletter Signup

Sign up to receive EcommerceNotes,
our acclaimed email newsletter.

And receive a free copy of our ebook
50 Great Ecommerce Ideas