Border radius

Learn how to set and customize the border radius of your app.

Adjust the border radius of your components using the --radius CSS variable in the globals.css file.

:root {
  --radius: 0.5rem; 
  /* ... */
}

Sizes

By default, the theme builder allows 4 border radius values.

But you can use any value you want. Like: 3px or 1rem.

Preview

None

Small

Medium

Large

Custom

This is how will look if the --radius CSS variable is set to 1rem.