Web Design with HTML and CSS

Tools to identify browser problems

Lesson 9, Browser Compatibility 207

have changed, and they began to look for ways to do things such as create rounded corners
for their CSS boxes. The original CSS specifi cation had no way of doing this.

Now you can apply eff ects such as rounded corners using CSS; however the CSS code for
this currently needs to be targeted at a specifi c browser and Internet Explorer 8 (currently
the most popular browser) does not support this eff ect. The following steps show how the
rounded corners eff ect works.

1 In your text editor, choose File > Open, navigate to your web09lessons folder, locate the
09_radius.html document, and open it.

This is a slightly modifi ed version of the layout you built in Lesson 8. The box in the
middle of the main column is a new div and currently has a thin blue border on all four
sides; you will now change the radius of the corners.

A standard box with borders in CSS has four sharp corners.

2 In your base.css style sheet, locate the last selector and set of rules for the recipe box. Add
the following property (highlighted in red):
#recipes {
width:450px;
fl oat:right;
border:1px solid #909;
margin-right:100px;
-moz-border-radius:24px;
}

The value -moz means this property is targeted for Mozilla browsers and is known as a
vendor-specifi c property. Users with a version of Mozilla Firefox 3 and above will see this
box rendered with curved corners on all four sides.

If you have a modern Mozilla-based web browser, you will

see curved corners.