EF
EF Design System

Border Radius

Border radius tokens control the roundness of components. All interactive elements use a minimum of 8px radius.

Radius Scale

8px
Small
radius-sm
12px
Medium
radius-md
16px
Large
radius-lg
20px
Extra Large
radius-xl
9999px
Full / Pill
radius-full

Applied Examples

Button
8px (sm)
Card
12px (md)
Modal
16px (lg)
Panel
20px (xl)
Badge / Pill
9999px (full)
css
/* Border Radius Tokens */
--radius-sm: 8px;      /* Buttons, inputs, badges */
--radius-md: 12px;     /* Cards, dropdowns */
--radius-lg: 16px;     /* Modals, preview boxes */
--radius-xl: 20px;     /* Large panels, hero cards */
--radius-full: 9999px; /* Pills, avatars, circular elements */

/* Usage */
border-radius: var(--radius-sm);   /* 8px  */
border-radius: var(--radius-md);   /* 12px */
border-radius: var(--radius-lg);   /* 16px */
border-radius: var(--radius-xl);   /* 20px */
border-radius: var(--radius-full); /* 9999px */