> ## 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.