The Complete Guide to Material-UI Border Radius (4 Examples)

A default design pattern in Material-UI is to create rounded corners with border radius. There are several ways to customize border radius ‘once’ and to have it globally available:

• Creating a custom theme and globally overriding a component type’s borderRadius style value
• Creating a custom theme and changing the value of shape.borderRadius
• Creating a StyledComponent

Furthermore, Material-UI provides a Border Utility that gives us a shorthand for applying border properties.

We’ll take a look at an example of each of these options. The Code Sandbox with full React code is in the Resources section.

***UPDATE for MUI 5: Material-UI moved to a new styling API where styling is applied using the sx prop. If you are using MUI v5, simply write the styling code directly in the sx prop instead of using makeStyles and classes. I’m working on updating all my articles, but until I’m finished you can read my guide to the MUI sx prop to learn more.

Material-UI Theme Overrides

Theme overrides changed in MUI v5. I’ll show code for both Material-UI v4 and MUI v5.

To quickly add a border radius to all instances of a component, create a custom theme and add an overrides section.

To create a custom theme, use the createMuiTheme hook. Then import that theme at a high level in your component and wrap all subcomponents in a ThemeProvider that uses that theme.

Wrapping the Playground component in App.jsx:

<ThemeProvider theme={customTheme}>
  <BorderRadiusPlayground />
</ThemeProvider>

Custom theme in Theme.jsx:

//v4 override syntax
const customTheme = createMuiTheme({
  overrides: {
    MuiContainer: {
      root: {
        border: "1px solid black",
        width: 80,
        height: 80
        borderRadius: 8
      }
    }
  }
});

//v5 override syntax
const customTheme = createTheme({
  components: {
    MuiContainer: {
      styleOverrides: {
        root: {
          border: "1px solid black",
          width: 80,
          height: 80,
          borderRadius: 8
        }
      }
    }
  }
});

Within the theme overrides object, there is a syntax for selecting components to override. For example, MuiContainer is the prefix for all classes applied to Container by default. Material-UI uses the same naming convention in the overrides object.

The styling above results in a Container that looks like the below:

Material-UI Theme Shape.BorderRadius

Setting a custom value to shape.borderRadius is a one-line way to change border radius all across a web app if you are already using a custom theme.

Take another look at the overrides code above. That changed border radius for all instances of a component type. If you want all component types have a default border radius to use a custom value, simply add the following line to your custom theme:

customTheme.shape.borderRadius = 20;

This does not add border radius to components that don’t have one by default. For example, Button does but Container and Box do not.

Also notice that Button does not have access to the Border Utility, so adding the borderRadius prop does not have any effect.

Styled Components

Another method for overriding default borderRadius is to create a Styled Component and use it throughout your app.

Simply create a component using useMemo and withStyles hooks that includes borderRadius styling. For example, create a Styled Textfield. This component can then be imported and used in other component. Here’s how to add custom hover styling to MUI Buttons using styled API.

For examples with full React code, take a look at the links above.

Material-UI Border Utility

The Border Utility is supposed to be an easy way to apply border styling to components. In fact, the docs mention it’s great for “images, buttons, or any other element”.

Unfortunately, I don’t see it working for anything other than the Box component. I attempted on Container and Button without success. As far as I know, there is not a way to compose a custom button that has access to this utility.

When using the Box component, the utility works great.

Below are two examples. They both use the Border Utility and the second takes the borderRadius value from the custom theme (using a shorthand way of doing so).

<Box borderRadius="25%" {...defaultProps}></Box>
<Box borderRadius="borderRadius" {...defaultProps} />

Based on the values I have for my Box size and shapes.borderRadius, this coincidentally produces two identical boxes:

I’ll keep experimenting and see if I can figure out how to use border props for other components.

Resources

Code Sandbox Link

Read more about Typography and Custom Themes.

The Theme Palette is another theme property that can be customized.