Cascading Style Sheets - HTML5 with Visual Studio 2012 - page 92

■ in Chapter 7 , i will show you how to implement rounded corners in older-browsers that do not support
this feature. After reading that chapter you'll likely have a better appreciation for having features like this supported
natively in the browser.

Note

Add the rules shown in Listing 4-3 to the end of the style element.

Listing 4-3. Using rounded borders
/* Rounded borders */
.rounded
{
border: 1px solid;
border-color:#999999;
border-radius:25px;
padding: 24px;
}

aside
{
border: 1px solid #999999;
border-radius:12px;
}

/* Make the radius half of the height */
nav
{
height: 30px;
border-radius:15px;
}

footer
{
height: 50px;
border-radius:25px;
}

For the nav and footer elements, since they are fairly short sections, you'll set the radius to be half of the
height. This will form a semi-circle on both ends. The top navigation section should look like Figure 4-8 .

Figure 4-8. Using rounded borders