[DataGrid] Improve column header separators

[MBilalShafi]

Fixes #7268

Comparison of different aspects: https://codesandbox.io/s/purple-shadow-c8l2xk?file=/demo.tsx

[mui-bot]

Netlify deploy preview

Netlify deploy preview: https://deploy-preview-9183--material-ui-x.netlify.app/

Updated pages

No updates.

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	645.1	1,206.6	645.1	901.22	207.933
Sort 100k rows	ms	543	1,015.1	853.4	835.8	156.75
Select 100k rows	ms	277.7	351.5	295.8	300.44	26.592
Deselect 100k rows	ms	179.8	312.6	223.2	230.4	48.325

Generated by 🚫 dangerJS against 05411c8

[MBilalShafi]

Or possibly keep this class until v7 for being non-breaking?

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[cherniavskii]

I have merged a slightly related PR recently - #9076 (it's also the one that caused conflicts for this PR, sorry about that 😅)
Should we show the column header borders on mobile by default (without hover)?

[MBilalShafi]

Should we show the column header borders on mobile by default (without hover)?

I think it makes sense since we enabled other hover actions on mobile by default. Not sure about the resize handle in the hovered state though if it'll look too heavier 🤔

[cherniavskii]

Not sure about the resize handle in the hovered state though if it'll look too heavier 🤔

We don't have to enable all hover styles by default on mobile, but only those applied on the column header cell level, so that we avoid issues like #8762 and #9073