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​.

• Use this mixin for rounded borders.

  advanced/cross_browser_borders.scss
  ​	​@mixin​ rounded_borders($​color​, $​width​: 5px, $​rounding​: 5px) {
  ​	-moz-border-radius: $rounding $rounding;
  ​	-webkit-border-radius: $rounding $rounding;
  ​	-khtml-border-radius: $rounding $rounding;
  ​	-o-border-radius: $rounding $rounding;
  ​	border-radius: $rounding $rounding;
  ​	border: $width $color solid; }

  And you can include it like any regular mixin:

  advanced/cross_browser_borders_use.scss
  ​	.header {
  ​	​@include​ rounded_borders(#336699, 3px) }

  This compiles to:

  ​	.header {
  ​	-moz-border-radius: 5px 5px;
  ​	-webkit-border-radius: 5px 5px;
  ​	-khtml-border-radius: 5px 5px;
  ​	-o-border-radius: 5px 5px;
  ​	border-radius: 5px 5px;
  ​	border: 3px #336699 solid; }