Boxes

Border

Bordered box

Bordered box with 0.25em Border radius

Bordered box with 0.375em 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">
  <p>Bordered box with 0.25em Border radius</p>
</div>
<div class="padding-30 border border-radius-0375">
  <p>Bordered box with 0.375em Border radius</p>
</div>
<div class="padding-30 border border-radius-05">
  <p>Bordered box with 0.5em Border radius</p>
</div>
<div class="padding-30 border border-radius-10">
  <p>Bordered box with 1.0em Border radius</p>
</div>
<div class="padding-30 border border-radius-15">
  <p>Bordered box with 1.5em Border radius</p>
</div>
<div class="padding-30 border border-radius-20">
  <p>Bordered box with 2.0em Border radius</p>
</div>
<div class="padding-30 border border-radius-25">
  <p>Bordered box with 2.5em Border radius</p>
</div>
<div class="padding-30 border border-radius-30">
  <p>Bordered box with 3.0em Border radius</p>
</div>

Box Shadow

Box shadow

Box shadow with hover


<div class="padding-30 bg-white box-shadow">
  <p>Bordered box with Box shadow</p>
</div>
<div class="padding-30 bg-white box-shadow-with-hover">
  <p>Bordered box with Box shadow</p>
</div>

Hovers

Shadow on Hover

Float on Hover

Scale on Hover

Shrink on Hover


<div class="padding-30 border hover-shadow">
  <p>Shadow on Hover</p>
</div>
<div class="padding-30 border hover-float">
  <p>Float on Hover</p>
</div>
<div class="padding-30 border hover-scale">
  <p>Scale on Hover</p>
</div>
<div class="padding-30 border hover-shrink">
  <p>Shrink on Hover</p>
</div>

© 2020 FlaTheme, All Rights Reserved.