Academytheming

Border radius

This lesson will show you how to adjust border radius to control the roundness of corners on your components, significantly impacting your design's overall style and feel.

Instructions

The border radius of your components plays a crucial role in defining your UI's visual character. Whether you prefer subtle, barely-noticeable rounding or bold, friendly curves, shadcn/ui makes it easy to adjust these values system-wide.

To change the border radius for your components:

  1. Open the variables panel
  2. Navigate to the Theme collection
  3. Find the radius variable group
  4. Change the values in radius-sm, radius-md, radius-lg and radius-xl
10 of 45