In this tutorial, I’m going to show you five (5) Sass mixins for the CSS3 border-radius property. The first one will be for multiple sides (shorthand) and the other four Sass mixins will be for each side: top, right, bottom and left.

Border Radius – Shorthand property

The Sass mixin for the CSS3 border-radius shorthand is:

// Border radius shorthand
@mixin border-radius($radius) {
  border-radius: $radius;
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  -o-border-radius: $radius;
}

The above Sass mixin includes the property and the vendor prefixes.

Usage example would be:

@include border-radius(top left, top right, bottom right, bottom left);

Example you would include in your Sass project files would be:

@include border-radius(5px 10px 15px 20px);

The CSS output would be:

border-radius: 5px 10px 15px 20px;
-webkit-border-radius: 5px 10px 15px 20px;
-moz-border-radius: 5px 10px 15px 20px;
-ms-border-radius: 5px 10px 15px 20px;
-o-border-radius: 5px 10px 15px 20px;

In the first code snippet, the Sass mixin, we wrote out all the vendor prefixes, which is okay, but we can use a vendor prefix Sass mixin for that, which would be:

// Vendor prefixing for shorthand properties
@mixin vendor-prefixes($property, $value) {
    -webkit-#{$property}: $value;
    -moz-#{$property}: $value;
    -ms-#{$property}: $value;
    -o-#{$property}: $value;
}

Then in the first code snippet, instead of writing out all the vendor prefixes, we could just use:

@include vendor-prefixes(border-radius, $radius);

So, the first code snippet, would change to be:

@mixin border-radius($radius) {
  border-radius: $radius;
  @include vendor-prefixes(border-radius, $radius);
}

As well, you can use the vendor prefix Sass mixin for other CSS properties in your Sass project. Just replace border-radius with the CSS property.

Example:

@include vendor-prefixes(CSS PROPERTY, $radius);

Border Radius – Individual sides

We can also have Sass mixins for individual sides.

Top border radius Sass mixin:

// Top border radius
@mixin border-top-radius($radius) {
  border-top-left-radius: $radius;
  border-top-right-radius: $radius;
}

Usage example:

@include border-top-radius(5px);

Left border radius Sass mixin:

// Left border radius
@mixin border-left-radius($radius) {
  border-bottom-left-radius: $radius;
  border-top-left-radius: $radius;
}

Usage example:

@include border-left-radius(5px);

Bottom border radius Sass mixin:

// Bottom border radius
@mixin border-bottom-radius($radius) {
  border-bottom-left-radius: $radius;
  border-bottom-right-radius: $radius;
}

Usage example:

@include border-bottom-radius(5px);

Right border radius Sass mixin:

// Right border radius
@mixin border-right-radius($radius) {
  border-bottom-right-radius: $radius;
  border-top-right-radius: $radius;
}

Usage example:

@include border-right-radius(5px);