Box Decoration

These styles apply miscellaneous decorations to an element for purely visual effect.

Rounded Corners
Shadows

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.

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

Shadows

You can apply a shadow to your content boxes by adding the .shadow class.

Box with shadow

<div class="border border-lightblue padding shadow">
    Box with drop shadow
</div>

Box with drop shadow