Shape Helpers

Rare shape utilities for cases that must be perfectly round or square.

Shape utilities should be rare because shape is mostly theme-level.

Circle

Use .circle only when an element must be perfectly round.

Jane Doe 
<img class="circle" src="https://i.pravatar.cc/48?img=5" alt="Jane Doe" width="48" height="48" />

CSS

.circle {
  border-radius: var(--radius-full);
}

Do not add .rounded-sm, .rounded-lg, .square, or .pill unless repeated real use proves they are needed.