Rounded corners

ch-rounded classes add a border-radius from 4px up to 48px in sensible increments.

<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; -->

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

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

<!-- Responsive -->
<div class="[sl,sm,md,lg]:ch-rounded--[none/sm/md/lg/xl/xxl]"></div>

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=""
/>