Border Radius

Rounded edges are easy on the eyes and require a lesser cognitive load to process visually than sharper edges. Rounded corners also point inwards to the center of an element, allowing users to focus on the contents within it.

Border radius defines the shape and corner treatment of components.
For accessibility, consistent corner radius helps maintain recognizable patterns and clear interaction states across the interface.

Accessibility Guidance

  • Use predefined radius units consistently
  • Avoid arbitrary radius values across similar components
  • Ensure rounded components maintain clear visual boundaries

Common Issues

  • Inconsistent corner radius usage
  • Excessive rounding reducing component clarity

Quick Checklist

✅ Radius usage is consistent across similar components

✅ Rounded components remain visually clear