Box Decoration
These styles apply miscellaneous decorations to an element for purely visual effect.
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.
(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.
<div class="border border-lightblue padding shadow"> Box with drop shadow </div>
Box with drop shadow