Box Shape
Border box shape for <div> tags. Classes work with <img /> tags too, so we also repurpose for image-shape. The radius of the box-round class can be adjusted from _evo_variables.scss.
box-[shape]
box-square
box-round
box-pill
box-circle
<div class="evo-box box-circle"></div>
Apply a box-[shape] class such as box-pill, as in the above example. To make perfect circle, set a square aspect ratio size for your container, and apply the box-circle class. box-square will set perfect corners, or use box-corner to apply corners with more force. box-round values are set within _evo_variables.scss
box-round-[number]
box-round-1
box-round-2
box-round-3
box-round-4
box-round-5
box-round-6
box-round-7
box-round-8
box-round-9
box-round-10
<div class="evo-box box-round-10"></div>
Apply a box-round-[number] class such as box-round-10, as in the above example. Works with <div> tags too.
box-round-[side]
box-round-top
box-round-bottom
box-round-right
box-round-left
<div class="evo-box box-round-left"></div>
Apply a box-round-[side] class such as box-round-left, as in the above example.
box-round-[corner]
box-round-top-left
box-round-top-right
box-round-bottom-left
box-round-bottom-right
<div class="evo-box box-round-bottom-right"</div><
Apply a box-round-[corner] class such as box-round-bottom-right, as in the above example.
box-corner-[side]
box-corner-top
box-corner-bottom
box-corner-left
box-corner-right
<div class="evo-box box-round box-corner-right"</div><
Apply a box-corner-[side] class such as box-corner-right, as in the above example. This will force corners on a round box.
box-corner-[corner]
box-corner-top-left
box-corner-top-right
box-corner-bottom-left
box-corner-bottom-right
<div class="evo-box box-round box-corner-bottom-right"></div>
Apply a box-corner-[corner] class such as box-corner-bottom-right, as in the above example. This will force a corner on a round box.