Bordered box
Bordered box with 0.25em border-radius
Bordered box with 0.5em border-radius
Bordered box with 1.0em border-radius
Bordered box with 1.5em border-radius
Bordered box with 2.0em border-radius
Bordered box with 2.5em border-radius
Bordered box with 3.0em border-radius
<div class="padding-30 border">
<p>Bordered box</p>
</div>
<div class="padding-30 border border-radius-025 margin-top-10">
<p>Bordered box with 0.25em border-radius</p>
</div>
<div class="padding-30 border border-radius-05 margin-top-10">
<p>Bordered box with 0.5em border-radius</p>
</div>
<div class="padding-30 border border-radius-10 margin-top-10">
<p>Bordered box with 1.0em border-radius</p>
</div>
<div class="padding-30 border border-radius-15 margin-top-10">
<p>Bordered box with 1.5em border-radius</p>
</div>
<div class="padding-30 border border-radius-20 margin-top-10">
<p>Bordered box with 2.0em border-radius</p>
</div>
<div class="padding-30 border border-radius-25 margin-top-10">
<p>Bordered box with 2.5em border-radius</p>
</div>
<div class="padding-30 border border-radius-30 margin-top-10">
<p>Bordered box with 3.0em border-radius</p>
</div>
Box Shadow
Box Shadow on Hover
Float on Hover
Scale on Hover
Shrink on Hover
<div class="padding-30 bg-white border-radius-025 box-shadow">
<p>Box Shadow</p>
</div>
<div class="padding-30 bg-white border-radius-025 hover-shadow margin-top-30">
<p>Box Shadow on Hover</p>
</div>
<div class="padding-30 bg-white border-radius-025 hover-float margin-top-30">
<p>Float on Hover</p>
</div>
<div class="padding-30 bg-white border-radius-025 hover-scale margin-top-30">
<p>Scale on Hover</p>
</div>
<div class="padding-30 bg-white border-radius-025 hover-shrink margin-top-30">
<p>Shrink on Hover</p>
</div>