This module helps to make rounded corners at the element.

Size #

Use the $radius map to generate classes for different rounded corners.

$radius: (
    small: 2px,
    base: 4px,
    large: 12px

Superkube will generate such classes:

  • rd-small
  • rd-base
  • rd-large
<div class="rd-small">...</div>
<div class="rd-base">...</div>

Of course, you can add your own size, for example:

$radius: (
    huge: 20px

Superkube will generate the rd-huge class with the specified rounding size.

<div class="rd-huge">...</div>

Helpers #

Use the rd-off class to turn off rounded corners at the element.

<div class="rd-off">...</div>

Use the rd-circle class to make an element circular if it has the same height and width.

<div class="rd-circle">...</div>

Behavior on small screens #

Use the rd-off-sm class to turn off rounded corners on small screens.

<div class="rd-base rd-off-sm">...</div>

Use the rd-circle-sm class to make the element round on small screens..

<div class="rd-base rd-circle-sm">...</div>