Border Radius

The TpGroup border radius system provides 7 values from sharp corners to fully rounded. Consistent corner rounding creates visual cohesion and helps define component hierarchy.

Radius Scale

radius-none
0px

Sharp corners, strict layouts, data tables

none
Rectangle
radius-sm
4px

Subtle rounding, badges, small elements

sm
Rectangle
radius-md
8px

Default rounding, buttons, inputs

md
Rectangle
radius-lg
12px

Cards, modals, prominent elements

lg
Rectangle
radius-xl
16px

Large cards, feature sections

xl
Rectangle
radius-2xl
24px

Extra large components, hero sections

2xl
Rectangle
radius-full
9999px

Pills, circles, avatars

full
Rectangle

Visual Comparison

none

0px

sm

4px

md

8px

lg

12px

xl

16px

2xl

24px

full

∞

Usage Examples

Buttons

Primary Button

Primary Button

radius-md

Pill Button

Pill Button

radius-full

Small Button

Small Button

radius-sm

Cards

Card Content
Example text

Default Card

radius-lg

Card Content
Example text

Large Card

radius-xl

Card Content
Example text

Sharp Card

radius-none

Avatars

Circle Avatar

radius-full

Rounded Avatar

radius-lg

Soft Avatar

radius-md

Code Example

/* CSS Custom Properties */
--radius-none: 0px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-full: 9999px;

/* Tailwind Classes */
<button className="rounded-lg">     /* 8px */
<div className="rounded-xl">       /* 12px */
<div className="rounded-full">     /* 9999px */

/* Direct CSS */
border-radius: var(--radius-lg);
border-radius: var(--radius-full);

Component Recommendations

ComponentRecommended RadiusRationale
Buttonsmd (8px)Standard, clickable appearance
Input Fieldsmd (8px)Consistency with buttons
Cardslg (12px)Softer, container-like feel
Modalsxl (16px)Prominent, focal elements
Badgesfull (9999px)Pill shape for labels
Avatarsfull (9999px)Circular for profile images
Data Tablesnone (0px)Sharp, structured appearance

Border Radius Guidelines

  • • Use consistent radius values throughout a component to maintain visual harmony
  • • Larger components (cards, modals) typically use larger radius values (lg, xl)
  • • Smaller components (buttons, badges) use smaller radius values (sm, md)
  • • Use radius-full for circular elements like avatars, icons, or pill-shaped badges
  • • Avoid arbitrary radius values - stick to the defined scale for consistency