Rounded corners

ch-rounded classes add a border-radius in increments of 4px.

<img class="ch-rounded--none" />
<!-- border-radius: 0; -->

<img class="ch-rounded--sm" />
<!-- border-radius: 4px; -->

<img class="ch-rounded--md" />
<!-- border-radius: 8px; -->

<img class="ch-rounded--lg" />
<!-- border-radius: 12px; -->

---

Circle

ch-circle adds a border-radius of 50%, turning an element into a circle if the height and width match.

<img
  src="https://www.arnoldclark.com/cdn/images/layouts/acdotcom/2018/twitter-hover.svg"
  class="ch-circle"
  alt=""
/>