Rounded

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>