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>
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
- W3C’s The “border-radius” properties
- W3C Resolutions 2007-09 Beijing Part IV: CSS3 Borders
- CSS Compatibility and Internet Explorer
- Bill Brown, Round corners on borders
- Border-radius: create rounded corners with CSS
- Spiffybox, Simple Rounded Corner CSS Boxes Made Easy
- Spiffy Corners2
- Simple Rounded Corner CSS Boxes