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