The following are Stylus mixins for the CSS border-radius property.

Border Radius – Shorthand property

This Stylus mixin will allow you to define the border radius of multiple sides.

border-radius(n)
  -webkit-border-radius n
  -moz-border-radius n
  border-radius n

Usage:

.border-radius
  border-radius(n)

Where n is the size of the border radius.

Example:

.border-radius
  border-radius(5px)

Output:

 .border-radius {
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
 }

Border Radius – Individual sides

The following are four (4) Stylus mixins for defining the border radius of individual sides.

Top:

border-top-radius(n)
  border-top-left-radius n
  border-top-right-radius n

Top usage and example:

.border-top-radius
  border-top-radius(5px)

Left:

border-left-radius(n)
  border-bottom-left-radius n
  border-top-left-radius n

Left usage and example:

.border-left-radius
  border-left-radius(5px)

Bottom:

border-bottom-radius(n)
  border-bottom-left-radius n
  border-bottom-right-radius n

Bottom usage and example:

.border-bottom-radius
  border-bottom-radius(5px)

Right:

border-right-radius(n)
  border-bottom-right-radius n
  border-top-right-radius n

Right usage and example:

.border-right-radius
  border-right-radius(5px)