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); @include border-bottom-left-radius(5px); @include border-top-left-radius(5px);
Or, you can specify two continuous corners at once like this:
@include border-top-radius(5px); // top left and top right @include border-right...