Putting it All Together - HTML5 with CSS3 - page 385

The current generation of web browsers all support border-radius quite well, and even without vendor
prefixes in newer versions. Older versions of Firefox and Safari implemented border-radius with their
vendor prefixes, but more importantly, they each initially implemented different naming conventions for the
longhand radius properties that single out specific corners.
Older versions of Firefox used property names like -moz-border-radius-topleft because Mozilla
implemented rounded corners before the properties were fully defined in the CSS specification. Webkit
implemented the prefixed border radius with a different naming scheme, as in -webkit-top-left-
border-radius . The Webkit naming convention eventually became the standard, but Firefox stuck with its
own unconventional naming. For a time, web designers who wanted rounded corners in both Firefox and
Safari had to declare them with completely different prefixed properties.
Thankfully both Safari and Firefox now support the un-prefixed, standardized properties, and have for a
long time, so it's fairly safe to omit those vendor prefixes in your CSS. Opera, Internet Explorer, and
Chrome jumped onto the rounded corner bandwagon a little later and mostly skipped the prefixing
process; you'll only ever need to prefix border-radius properties if you're catering to older versions of
Firefox and Safari. Any browsers that don't support border-radius will simply show the angled corners,
which is usually a perfectly acceptable degradation if you've planned for it.
Our design for Power Outfitters is a bit boxy, and we're actually pretty happy with that. We've made those
rectangular panels an integral part of the design, sharp corners and all. But there are still a few places
where we can use border-radius to take some of the edge off (sorry, we couldn't resist).
We've already done some work on our “Add to Cart” buttons, styling them with a border, padding, a dark
background color, an icon as a background image, and even a hint of text-shadow . It's a serviceable
button already, but we can use border-radius to round off the corners, making it seem more touchable
and, well, more buttony. A little box-shadow can add a dimensional effect as well. Listing 10-30 shows our
updated cart button style rule and Figure 10-30 shows the rendered changes.
Listing 10-30. Adding rounded corners and a box shadow to the cart buttons
.cart-add {
color: #fc0;
cursor: pointer;
padding: .25em 32px .25em 8px;
background: #102662 url(../images/icon-cart-sm.png) 92% 50% no-repeat;
text-shadow: -1px -1px 0 rgba(0,0,0,0.75);
border: 2px solid #2446a8;
border-radius: 10px;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.35);
}