HTML and CSS Reference
In-Depth Information
<!--[if lte IE 6]>
<style>
#location {
zoom: 1;
}
</style>
<![endif]-->
Adding Rounded Corners and Drop Shadows Without Images
Creating rounded corners and drop shadows once took a lot of patient effort, but now takes just a few seconds.
Both features are part of CSS3, so they don't work in IE 6-8 or older versions of other browsers. But because these
effects are purely decorative, there's no need to provide a fallback.
if you really need a fallback for older versions of iE, try Css PiE ( http://css3pie.com/ ) .
Tip
Creating Rounded Corners With border-radius
If you're tired of being boxed in by angular designs, the border-radius and related properties might be just what
you've been waiting for. In spite of the name, an element doesn't need to have a border for you to give it rounded
corners. You can adjust each corner individually or apply the same values to each one. What's more, you can
set the horizontal and vertical radii of each corner separately, so you're not limited to uniform shapes. This fine
degree of control can make the syntax seem overwhelming at first, but it's not difficult. What's more, there are
visual tools available to do the calculations for you.
Table 9-3 lists the properties for creating rounded corners.
Table 9-3. Rounded Corner Properties
Property
Initial Value
Description
border-top-left-radius
0
Rounds an element's top-left corner.
border-top-right-radius
0
Rounds an element's top-right corner.
border-bottom-right-radius
0
Rounds an element's bottom-right corner.
border-bottom-left-radius
0
Rounds an element's bottom-left corner.
border-radius
Sets the values for all corners in a single
declaration.
if you need to support ios safari 3.2 or Android 2.1, use the -webkit prefix in addition to the standard
Note
property.
 
 
Search WWH ::




Custom Search