← Superkube / Documentation 1.5


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:

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

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

$radius: (
    huge: 20px

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

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

Helpers #

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

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

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

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

Behavior on small screens #

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

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

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

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