Radius

Each step follows --eun-borderRadius-<step>. Four steps, from a subtle s used on small controls up to xl, a 999px pill used for fully rounded shapes (badges, the rounded variant of eun-button).

Token	Value	Typical use
--eun-borderRadius-s	5px	Small controls (checkboxes, tags)
--eun-borderRadius-m	10px	Default for buttons, inputs, cards
--eun-borderRadius-l	20px	Larger surfaces (modals, panels)
--eun-borderRadius-xl	999px	Pill shape (rounded buttons, avatars, badges)

Usage

.custom-card {
  border-radius: var(--eun-borderRadius-m);
}

eun-button's own --button-borderRadius custom property defaults to var(--eun-borderRadius-m). Override it per-instance without touching the token itself:

<eun-button style="--button-borderRadius: var(--eun-borderRadius-xl);">
  Pill button
</eun-button>