> ## Documentation Index
> Fetch the complete documentation index at: https://docs.uifoundations.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Border Radius

> Adjusting the sharpness of corners to match a different feeling or style

The default border radius across all components in UI Foundations Kit is `6px`. This is a common value that is used in many design systems and is a good starting point for most projects.

You can adjust the border radius of components by changing the `shape.borderRadius` value in the theme file. This will apply the new border radius to all components that use the `sx` prop or the `theme` object.

```ts theme.ts theme={null}
const theme = createTheme({
  shape: {
    borderRadius: 6,
  },
});
```

## Preview different radii

The [live demo](https://demo.uifoundations.com/dashboard/home) allows you to preview different border radii from the theme switcher, if you're interested in seeing how different radii look.

The different default radii give the app a different look, ranging from more technical and developer centric the more sharp you get, to more friendly and approachable the more rounded you get.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.