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.
const theme = createTheme({
shape: {
borderRadius: 6,
},
});
Preview different radii
The live demo 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.