The latest
Update for Expression web 4 adds New Support for CSS 3
Properties.
However, this support is only for the newest web browsers like Internet Explorer 9 and Firefox 4, to mention a few. We need to continue to use the browser-specific prefixes for the older browser versions of Firefox and Safari and Chrome.
IE 8 and earlier have zero support for rounded corners. (but we could use IE filters)
Firefox: -moz-border-radius
Safari and google chrome: -webkit-border-radius
Yet, the CSS3 border-radius property should really be "border-radius".
(Internet Explorer 9 is the first version of Internet Explorer to finally support any CSS3 at all. )
In a nutshell, we can specify border-radius using the Style builder in Expression Web, but this will only created rounded corners in IE9. We must still open up our External style Sheet and directly specify -moz and -webkit-border-radius in order to see rounded corners in most versions of the popular browsers.
Please realize when using -moz or -webkit to specify any type of CSS3, it generates errors in the Style Sheets. That is because the CSS3 specification is "border-radius", for instance. Anything other than border-radius (or some other CSS3 property) will be viewed as error in a css validator.
Does this mean we should avoid there use? NO. What it means is that the browsers need to get their act together so that Designers can take advantage of the technologies available. CSS3 rounded corners is a far more efficient way to create rounded corners. Why should we be forced to create several images and then nest several divs just to insert those images? Or worse, use a table to insert those images!!! (Note: this has been a long standing problem with many browser manufacturers. IT's a long story that I don't want to go into right now. But, if you go to http://www.webstandards.org/about/mission/ you will get a better understanding of the situation and the history of web browsers taking so long to support CSS and in supporting the web standards in general.)
CSS 3 'border-radius' property, technically, is the property to use if you want to create round corners without using an image.
With the release of IE9, we now need to use the "border-radius" property as it was intended. Likewise, the newer browsers also support the "border-radius" property.
But, since every browser varies in CSS support, we will continue to use browser specific prefixes for Firefox and for Safari-Crhome.
-moz-border-radius: This is Mozilla-specific CSS Property that we will use to create round corners of an element (such as div).
-webkit-border-radius: This Property will round corners if Safari and Google Chrome.
Open your Style Sheet and manually type the property and value by appending it to an existing style.
For instance, let's say you want to make rounded corners on the container div. Just add -moz-border-radius to the #container style by opening your External style sheet and writing the property value pair directly onto your style sheet.
Example:
#container {
width: 900px;
margin: 0 auto;
background-color:
#777;
-moz-border-radius: 12px;
}
Note: Use pixels or ems for the unit of measurement.
Now let's add to the above style rule so that is targets webkit browsers and the the new browsers that support CSS3.....
#container {
width: 900px;
margin: 0 auto;
background-color:
#777;
-moz-border-radius: 12px;
-webkit-border-radius:12px;
border-radius:12px;
}
You can use Pixels(px) or EMs (em).
-webkit-border-radius:12px;
Be creative and round one, two, three, or all 4 corners.
When rounding all 4 corners of a particular element, we will write the following properties directly onto our External Style Sheet:
-webkit-border-radius:10px;
-moz-border-radius:
10px;
We would add the above property:value pairs to an existing Style, such as the #container Style, and this would round the corners on the container.
If you want to round specific corners individually, then just write those property:value pairs that you need and specify the particular corner to style as explained earlier.
Internet Explorer is our Problem Child, which is no big surprise. Check out PIE, a new creative way to cause specific CSS 3 properties to render in IE.
Watch
the Video:
Using CSS3 to Round Corners
