Sass and Compass for Designers

The border-radius syntax

Border-radius is another CSS property that's finally settling down and being implemented sans vendor prefix in modern browsers. Regardless, to ensure the widest compatibility, use the Compass border-radius mixin. Here's an example:

@include border-radius(5px);

This applies the same radius to every corner of a box. We can set a variable as the default for the border-radius like this:

$default-border-radius: 5px;

Let's add that into our _variables.scss partial and then we can just include a rounded corner on an element like this:

@include border-radius;

That's fine when we need the same radius on every corner, but let's consider how we specify different radiuses for each corner:

@include border-top-right-radius(5px); @include border-bottom-right-radius(5px); ...