O'Reilly logo

Pragmatic Guide to Sass by Michael Lintorn Catlin, Hampton Catlin

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

19Generating 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; ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required