Image Shape

Border box shape for <img /> or <div> tags. We simply repurpose the box-shape classes. The box-round class can be adjusted from _evo_variables.scss.

box-[shape]

box-square

box-round

box-pill

box-circle

<img class="evo-image image-fpo image-size-10 box-circle" />

Apply a box-[shape] class such as box-shape, as in the above example. Works with <div> tags too. 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

<img class="evo-image image-fpo image-size-3 evo-box box-thin box-round-10" />

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

<img class="evo-image image-fpo image-size-10 evo-box box-thin box-round-left" />

Apply a box-round-[side] class such as box-round-left, as in the above example. Works with <div> tags too.

box-round-[corner]

box-round-top-left

box-round-top-right

box-round-bottom-left

box-round-bottom-right

<img class="evo-image image-fpo image-size-10 box-round-bottom-right" />

Apply a box-round-[corner] class such as box-round-bottom-right, as in the above example. Works with <div> tags too.

box-corner-[side]

box-corner-top

box-corner-bottom

box-corner-left

box-corner-right

<img class="evo-image image-fpo image-size-10 box-round box-corner-right" />

Apply a box-corner-[side] class such as box-corner-right, as in the above example. Works with <div> tags too. 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

<img class="evo-image image-fpo image-size-10 box-round box-corner-bottom-right" />

Apply a box-corner-[corner] class such as box-corner-bottom-right, as in the above example. Works with <div> tags too. This will force a corner on a round box.