• Home
• Products
• Tutorials
• Extensions
• Support
• Company
  

TMM2 Tweaks Main | Finished Page | TMM2 Home

CSS Border-Radius: Rounded Corners Without the Fuss

CSS3 specification includes many new properties, including border-radius. With this property, box level elements can be assigned curved corners without the need for complex background images or even more complex JavaScripts. There are several TMM2 (version 2.1.6 or higher) style themes that lend themselves to using this technique:

• Neon Right Aligned
• Neon Left Aligned
• Image-Based (for the sub-menu items)

For the purposes of this exercise, we'll use Neon Left Aligned.

Curving your corners

To make the links in Neon Left Aligned curved, locate the .p7TMM12 ul a rule in your p7TMM12.css file:

.p7TMM12 ul a {
color: #69A4FE;
display: block;
padding: 8px 8px 8px 20px;
text-decoration: none;
zoom: 1;
outline: 0;
border: 1px solid #69A4FE;
margin-bottom: 4px;
text-align: left;
}

Change the border width to 2px. Curved borders need a little thickness to appear smooth:

border: 2px solid #69A4FE;

Add the following border-radius properties:

border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;

The first rule reflects the default W3 specification syntax. As of March 2010 it is supported by Opera 10.5 (and higher) and Microsoft Internet Explorer 9 (currently in Beta with an expected late 2010 release date). The second and third properties are proprietary Mozilla (Firefox) and KHTML (Safari and Chrome) syntax. Mozilla and KHTML will support the W3 default syntax at a later date.

Your finished rule should look like this:

.p7TMM12 ul a {
color: #69A4FE;
display: block;
padding: 8px 8px 8px 20px;
text-decoration: none;
zoom: 1;
outline: 0;
border: 2px solid #69A4FE;
margin-bottom: 4px;
text-align: left;
border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
}

Browser Progressive Enhancement

The concept of progressive enhancement involves using modern features to enhance the features or the look of a web page in browsers that support the feature to an extent that the page still looks normal and professional in older non-supporting browsers. In this case, you would use border-radius curves with the understanding that older browsers will display normal rectangular borders. If, for example, your design mandate required curved corners, you would want to use a method supported by older browsers.

The border radius method used here is supported by Firefox 3, Safari 3, Chrome, Opera 10, IE9. Other browsers will render rectangular borders.