Radius

Soften and group elements by using rounded corners.

Figma

.rounded-none0px0px

.rounded-sm0.125rem2px

.rounded0.25rem4px

.rounded-md0.375rem6px

.rounded-lg0.5rem8px

.rounded-xl0.75rem12px

.rounded-2xl1rem16px

.rounded-3xl1.5rem24px

.rounded-4xl2rem32px

.rounded-full9999px9999px

Usage in Figma

Radius tokens are published from Stylus Design Tokens and should be available by default in Scribe Figma files. Select the hexagon icon in applicable fields to apply radius tokens.

Usage in code

Sizing for rounded corners is inherited from Tailwind. Although components in Stylus will already come with a border radius pre-defined, this scale can be used to create new components.

<Component className="rounded-none" /> // No radius
<Component className="rounded" />      // Default (4px) radius
<Component className="rounded-md" />   // Medium (6px) radius
<Component className="rounded-lg" />   // Large (8px) radius