Round

The round component styles an element with equal border-radius.

Class What it does?
round--o Styles an element with border-radius of 50%
round Styles an element with border-radius of 0.8rem.
round--s Styles an element with border-radius of 0.4rem
round--l Styles an element with border-radius of 1.6rem
round--xl Styles an element with border-radius of 2.4rem
round--xxl Styles an element with border-radius of 3.2rem
round--xxxl Styles an element with border-radius of 4.0rem

 

.round--o

Butterfly image using class: round--o

<img alt="butterfly" class="round--o" src="blue-butterfly.jpg" />

.round

Butterfly image using class: round

<img alt="butterfly" class="round" src="blue-butterfly.jpg" />

.round--s

Butterfly image using class: round--s

<img alt="butterfly" class="round--s" src="blue-butterfly.jpg" />

.round--l

Butterfly image using class: round--l

<img alt="butterfly" class="round--l" src="blue-butterfly.jpg" />

.round--xl

Butterfly image using class: round--xl

<img alt="butterfly" class="round--xl" src="blue-butterfly.jpg" />

.round--xxl

Butterfly image using class: round--xxl

<img alt="butterfly" class="round-xxl" src="blue-butterfly.jpg" />

.round--xxxl

Butterfly image using class: round--xxxl

<img alt="butterfly" class="round--xxxl" src="blue-butterfly.jpg" />