Rounded Corners Everywhere
- 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
- 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 ... }