react-test/docs/data/material/customization/shape/shape.md

Shape

The shape is a design token that helps control the border radius of components.

The shape contains a single property, borderRadius, with the default value of 4px. Several components use this value to set consistent border radii across the library.

Custom shape

To add custom shapes, create a theme with the shape key:

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  shape: {
    borderRadius: 8,
    borderRadiusSm: 4, // new property
    borderRadiusMd: 8, // new property
    borderRadiusLg: 16, // new property
    borderRadiusXl: 24, // new property
  },
});

Typescript

If you're using TypeScript you need to use module augmentation to extend new shape properties to the theme.

declare module '@mui/material/styles' {
  interface Shape {
    borderRadiusSm: number;
    borderRadiusMd: number;
    borderRadiusLg: number;
    borderRadiusXl: number;
  }

  interface ShapeOptions {
    borderRadiusSm?: number;
    borderRadiusMd?: number;
    borderRadiusLg?: number;
    borderRadiusXl?: number;
  }
}