Rounded Button Using Notched Corners and CSS3

These rounded buttons appear rounded in all popular browsers, have gradients in Yahoo! Graded Browser Support A-Grade browsers, and require no additional HTTP requests to download images.

They are implemented as follows:

• Notched corners (top/bottom borders on a container plus negative margins pushing out the sides of the control beyond them) as a baseline (applies in Internet Explorer 6-8 and Opera 9.10) versus CSS3 border-radius in browsers with experimental implementations (including Safari 4 and Firefox 3-3.5).
• Red background as a baseline, plus filter for gradients in Internet Explorer 6-8, -webkit-gradient for gradients in Safari 4, box-shadow for gradients in Firefox 3-3.5 and Opera 9.10
• Underline on hover/focus/activation in supporting browsers.