1. Rounded Corners
Everywhere
Scott Olmsted
http://www.railsrescue.com

2. Problem: replace Photoshop
objects with styled text showing
rounded corners and box shadows

3. Solution: CSS3
li {
-moz-border-radius: 5px;
-moz-box-shadow: 0 1px 3px #999999;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0 1px 3px #999999;
}

4. Instant Web 2.0:
Text + CSS3 styling

5. Problem: browsers without
CSS3 border-radius support:
IE

6. Solution: CSS3 PIE
http://css3pie.com/

7. One file and a little styling—
li {
behavior: url(/stylesheets/PIE.htc);
border-
border-radius: 5px;
box-
box-shadow: 0 1px 3px #999999;
-moz-border-radius: 5px;
-moz-box-shadow: 0 1px 3px #999999;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0 1px 3px #999999;
}

8. —and IE behaves like a
“modern” browser

9. Plus an alternate way to call
li {
behavior: url(/stylesheets/PIE.php
php);
php
...
}

10. Thankyouthankyouverymuch