Web Design with HTML and CSS

208

Tools to identify browser problems

Web Design with HTML and CSS Digital Classroom

Other browsers will not understand this property and the box will remain in its default

state. Another browser vendor is WebKit, and WebKit-based browsers, such as Apple

Safari and Google Chrome, have their own property for radius.

3 Add the following property and value (highlighted in red):

#recipes {

width:450px;

fl oat:right;

border:1px solid #909;

margin-right:100px;

-moz-border-radius:24px;

-webkit-border-radius:24px;

}

Save your page. If you have a recent version of a WebKit-based browser you would now

be able to see the same curved corners as in Firefox. However, this still leaves out all

versions of Internet Explorer from 8 and below. With the upcoming release of Internet

Explorer 9, there is support for the “offi cial” version of the border radius property which

more closely resembles the CSS properties you have been used to working with.

4 Add the following property and value (highlighted in red):

#recipes {

width:450px;

fl oat:right;

border:1px solid #909;

margin-right:100px;

-moz-border-radius:24px;

-webkit-border-radius:24px;

border-radius:24px;

}

Save your fi le. With these three properties for radius added, you the border-radius

property for most browsers. This might seem excessive for one rule, but consider the fact

that all future browsers might eventually use the border-radius property. You can view

these vendor-specifi c properties as testing ground for new and useful features. Browser

developers might remove some of these features if they prove to be not useful, but other

features such as border-radius a standard and form part of every web designer’s toolbox.