diff --git a/packages/mui-material/src/Divider/Divider.js b/packages/mui-material/src/Divider/Divider.js
index 26784a02c5daee..a356c9760d10fb 100644
--- a/packages/mui-material/src/Divider/Divider.js
+++ b/packages/mui-material/src/Divider/Divider.js
@@ -102,6 +102,8 @@ const DividerRoot = styled('div', {
whiteSpace: 'nowrap',
textAlign: 'center',
border: 0,
+ borderTopStyle: 'solid',
+ borderLeftStyle: 'solid',
'&::before, &::after': {
content: '""',
alignSelf: 'center',
@@ -114,6 +116,7 @@ const DividerRoot = styled('div', {
'&::before, &::after': {
width: '100%',
borderTop: `thin solid ${(theme.vars || theme).palette.divider}`,
+ borderTopStyle: 'inherit',
},
}),
}),
@@ -124,6 +127,7 @@ const DividerRoot = styled('div', {
'&::before, &::after': {
height: '100%',
borderLeft: `thin solid ${(theme.vars || theme).palette.divider}`,
+ borderLeftStyle: 'inherit',
},
}),
}),
diff --git a/packages/mui-material/src/Divider/Divider.test.js b/packages/mui-material/src/Divider/Divider.test.js
index 2dfd208d321d3e..0d2eccb6a6b09f 100644
--- a/packages/mui-material/src/Divider/Divider.test.js
+++ b/packages/mui-material/src/Divider/Divider.test.js
@@ -1,6 +1,7 @@
import * as React from 'react';
import { expect } from 'chai';
import { createRenderer } from '@mui-internal/test-utils';
+import { styled } from '@mui/material/styles';
import Divider, { dividerClasses as classes } from '@mui/material/Divider';
import describeConformance from '../../test/describeConformance';
@@ -83,6 +84,40 @@ describe('', () => {
expect(container.querySelectorAll(`.${classes.textAlignLeft}`).length).to.equal(0);
});
});
+
+ describe('custom border style', function test() {
+ before(function beforeHook() {
+ if (/jsdom/.test(window.navigator.userAgent)) {
+ this.skip();
+ }
+ });
+
+ const StyledDivider = styled(Divider)(() => ({
+ borderStyle: 'dashed',
+ }));
+
+ it('should set the dashed border-left-style in before and after pseudo-elements when orientation is vertical', () => {
+ const { container } = render(content);
+ expect(
+ getComputedStyle(container.firstChild, '::before').getPropertyValue('border-left-style'),
+ ).to.equal('dashed');
+ expect(
+ getComputedStyle(container.firstChild, '::after').getPropertyValue('border-left-style'),
+ ).to.equal('dashed');
+ });
+
+ it('should set the dashed border-top-style in before and after pseudo-elements when orientation is horizontal', () => {
+ const { container } = render(
+ content,
+ );
+ expect(
+ getComputedStyle(container.firstChild, '::before').getPropertyValue('border-top-style'),
+ ).to.equal('dashed');
+ expect(
+ getComputedStyle(container.firstChild, '::after').getPropertyValue('border-top-style'),
+ ).to.equal('dashed');
+ });
+ });
});
describe('prop: variant', () => {