Border radius

The Sass mixins apply the default border radius ($border-radius) to specific sides. For example, @border-top-radius() applies the following CSS:

border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;

Usage

All sides

Use .border-radius to apply the default border radius (.25rem) to all sides of an element.

Use .rounded to apply the default stronger border radius (2rem) to all sides of an element. The rounded border radius can be changed using $border-radius-rounded.

Use .circle to apply a 50% border radius to all sides of an element.

<div class="border border-4 border-radius"></div>
<div class="border border-4 rounded"></div>
<div class="border border-4 circle"></div>

Use .border-radius-0 to remove the existing border radius from all sides of an element.

Individual sides

Use .border-radius-{side} to apply the standard border radius to a specific side of an element.

<div class="border border-4 border-radius-top"></div>
<div class="border border-4 border-radius-right"></div>
<div class="border border-4 border-radius-bottom"></div>
<div class="border border-4 border-radius-left"></div>

Variants

By default, only responsive variants are generated for border radius utilities.

Responsive

To control the border radius for an element at a specific breakpoint, add a {screen}: prefix to any existing border radius utility.

For example, use .md:border-radius-top to apply the border-radius-top utility at only medium screen sizes and above.

Hover-state

To include hover-state variants like .hover:border-radius-top, add "border-radius" to the $hover-variants variable when recompiling your CSS:

$hover-variants: (
  // ...
  "border-radius",
);