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.

Read More Article...