Tuning vendor prefixes from Compass stylesheets

Vendor-specific rules provide us with early implementations of standard properties and alternative syntaxes. These rules allow browsers to implement proprietary CSS properties that would otherwise have no working standards (and may never actually become standardized). Which vendor prefixes you will have to add depends on the browsers you have to support. In this recipe, you will learn how to configure Compass cross-browser support.

Since CSS3, you can give any block level element rounded corners without using images by using the border-radius property. The border-radius property should be prefixed for the best possible browser support. Compass can automatically add the right prefixes for you.

Getting ready

Of course, you will have to install Compass for this recipe. So, read the Installing Compass recipe of Chapter 1, Getting Started with Sass, to find out how to install Compass. Also, read Chapter 7, Cross-Browser CSS3 Mixins, of this book to...