How to Make a MUI Horizontal Line Divider (Custom Thickness and Width)

Material-UI has a useful divider component for separating list items, divs, or any other element. The divider visually appears as a horizontal line separator. We can customize the thickness and width of this line with a few CSS values.

I started with this example from the MUI docs and then styled the horizontal dividers. The first one is an example of custom thickness, the second is an example of custom width:

MUI Horizontal Line Divider With Custom Thickness and Width
MUI Horizontal Line Divider With Custom Thickness and Width

The secret to setting thickness is to adjust the border-bottom-width value. The secret to custom width is to change the margin, and the width will automatically adjust.

Material-UI Horizontal Divider

The Divider has a couple of important props that affect how it renders.

  • variant – Provides basic width options
  • component – Allows the Divider to render as a different element. The default is hr.

The DOM tells us some interesting things about the divider. When I set the component value to li, it renders as an li (of course) and it adds role="separator". We also see the MuiDivider-root class, which can be used for styling if needed.

MUI Separator
MUI Separator

When I set variant="inset", MUI adds margin-left: 72px. This value does not seem to change no matter how wide the list is.

Material-UI Divider Thickness

Here’s the code to change Divider thickness:

<Divider component="li" sx={{borderBottomWidth: 4}}/>

The Divider in this example is an li rendering with a bottom border. That’s really the extent of the component. The borderBottomWidth value changes the thickness of the bottom border, which actually gives the Divider more height (and more visual thickness).

MUI Divider "height"
MUI Divider “height”

Material-UI Divider Width

Here’s the code to change MUI Divider width:

<Divider component="li" sx={{marginLeft: '5%', marginRight: '5%'}}/>

You can also use one of the three variant values (middle, inset, fullWidth), but directly setting margin with sx gives you more control.

The Divider nicely reduces it’s width to account for margin increases. If you need space on the left side, I highly recommend using marginLeft. If you need space on the right, you can either set the width value (i.e. width: '95%') or use marginRight, which I recommend.

Related Links

Here are additional useful posts:

MUI Divider API

Share this post:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.