| 19 | Generating Cross-Browser Rounded Borders |
Rounded borders are a complex thing. We need to use a different method of calculation for Internet Explorer, Firefox, and Webkit. Wouldn’t it be so much easier if there were one simple way of doing it?
Why, you can have one simple way: with Sass! There’s a mixin that allows you to define the rounded borders for all three main browsers. This keeps our code clean and we don’t need to repeat ourselves.
Just so you know, many of these macros come preinstalled with Compass, which we’ll look at more in Part 3, Compass.
| What To Do... |
- Use this mixin for rounded borders.
advanced/cross_browser_borders.scss @mixin rounded_borders($color, $width: 5px, $rounding: 5px) { -moz-border-radius: $rounding $rounding; ...
Get Pragmatic Guide to Sass now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
