Border Radius

Border radius tokens provide consistent corner rounding throughout your interface, from subtle roundings to fully circular elements.

Radius Scale

Visual Examples

Cards and Containers

Buttons and Interactive Elements

Circular Elements

Usage

In CSS

.card {
  border-radius: var(--token-radii-md); /* 8px */
}

.button {
  border-radius: var(--token-radii-sm); /* 7px */
}

.avatar {
  border-radius: var(--token-radii-round); /* 9999px */
}

/* Specific corners */
.dropdown {
  border-top-left-radius: var(--token-radii-none);
  border-top-right-radius: var(--token-radii-none);
  border-bottom-left-radius: var(--token-radii-md);
  border-bottom-right-radius: var(--token-radii-md);
}

In JavaScript/TypeScript

import { tokens } from '@vibrant-ui/tokens';

const cardStyle = {
  borderRadius: `${tokens.radii.md}px`, // "8px"
};

const avatarStyle = {
  borderRadius: '50%', // or tokens.radii.round
};

With Vibrant UI Components

import { Card, Button, Avatar } from '@vibrant-ui/components';

<Card radius="md">
  Card content
</Card>

<Button radius="sm">
  Click me
</Button>

<Avatar radius="round">
  JD
</Avatar>

Guidelines

Consistency

Use consistent radius values throughout your interface:

• none (0px): Sharp corners for technical/data interfaces
• 3xs-xs (4-6px): Subtle rounding for small elements
• sm-md (7-8px): Standard rounding for most components
• lg-xl (10-12px): Friendly, approachable feeling
• 2xl+ (14px+): Playful, modern aesthetic
• round (9999px): Perfect circles and pills

Context

Choose radius values based on:

• Brand personality: More rounded = friendly, less rounded = professional
• Component size: Larger components can handle larger radius values
• Content type: Data tables might use smaller radius, marketing cards larger

Accessibility

• Ensure sufficient contrast at corners
• Test with high contrast mode
• Consider how border radius affects focus indicators