Border Radius

Border radius utilities round element corners on a shared size scale, with optional targeting of individual sides or corners.

Sizes

Size	Value	Use
none	0	Removes rounding
sm	0.25rem	Subtle rounding on small elements (inputs, tags)
md	0.5rem	Default rounding for cards and panels
lg	0.75rem	Larger rounding for prominent containers
xl	1rem	Heavy rounding for hero/feature panels
full	999px	Pill shapes (buttons, chips)
circle	50%	Circular shapes (avatars, icon badges)

Corners

Pattern: .util-radius-<corner>-<size>

• all — all four corners
• top — top-left and top-right
• bottom — bottom-left and bottom-right
• left — top-left and bottom-left
• right — top-right and bottom-right
• top-left, top-right, bottom-left, bottom-right — a single corner

Examples

Card

A card rounded on all corners with .util-radius-all-md

<div class="util-background-odyssey util-radius-all-md util-pad-all-md">
  A card rounded on all corners with
  <code>.util-radius-all-md</code>
</div>

<div class="util-radius-all-md">Card content</div>

Pill button

Pill shape with .util-radius-all-full

<div
  class="util-background-odyssey util-radius-all-full util-inline-block util-pad-vert-sm util-pad-horiz-lg"
>
  Pill shape with
  <code>.util-radius-all-full</code>
</div>

Circular avatar

border-radius: 50% only renders as a true circle when width and height are equal. Pair .util-radius-all-circle with a .util-square-* size to force equal dimensions on any content — an image, an icon, or a short label:

<img
  src="/favicon-150x150.png"
  alt
  class="util-background-odyssey util-square-xxl util-radius-all-circle util-pad-all-sm"
/>

<img src="avatar.jpg" alt="" class="util-square-xl util-radius-all-circle" />

Asymmetric — top only

Rounded only on top with .util-radius-top-lg

<div class="util-background-odyssey util-radius-top-lg util-pad-all-md">
  Rounded only on top with
  <code>.util-radius-top-lg</code>
</div>