Rounded Corners

You can round the corners of your elements using the rounded classes. The element in question does not need to have a border for these to work – rounded corners will also apply to the padding box.

Corners will always be rounded in a 3px radius.

Usage

Elements with rounded corners
(Padding and background color added for demonstrational purposes)

<div class="rounded">
    Rounded corners on all sides
</div>

Rounded corners on all sides

<div class="rounded-top">
    Rounded top corners
</div>

Rounded top corners

<div class="rounded-bottom">
    Rounded bottom corners
</div>

Rounded bottom corners

<div class="rounded-left">
    Rounded left corners
</div>

Rounded left corners

<div class="rounded-right">
    Rounded right corners
</div>

Rounded right corners