CSS border collapse with MUI tabs

Question

In this picture #1 is the regular border which I need to have. #2 and #3 are double the sizes of the #1. In the #4 we can see it happens because both nearby elements have borders and those aren't collapsed.

In my React / MUI project I have added borderCollapse: "collapse" . But still, the problem is there.

This is my code sandbox

What went wrong in my code?

Answer 1

Each item in the Tabs gets it's own border that's why it looks double for the elements between.

The closest solution with the less code I could find is to add negative margin-left in each item except the first one like the code below. Here is the working codesandbox

    <Tabs
              value={value}
              onChange={handleChange}
              centered
              variant="fullWidth"
              aria-label="basic tabs example"
              sx={{
                ".MuiButtonBase-root": {
                  color: "white",
                  textTransform: "none",
                  borderCollapse: "collapse",
                  border: "1px solid #83858E",
                  fontWeight: "normal",
                  marginLeft: "-1px" // You add negative margin
                },
                "& :first-child": {
                  borderTopLeftRadius: "0.5rem",
                  borderBottomLeftRadius: "0.5rem",
                  margin: "0" // You remove the negative margin-left for the first element.
                },
                "& :last-child": {
                  borderTopRightRadius: "0.5rem",
                  borderBottomRightRadius: "0.5rem"
                },
                "& .MuiTabs-indicator": {
                  display: "none"
                },
                "& .MuiTab-root.Mui-selected": {
                  color: "black",
                  backgroundColor: "#ABA9FF",
                  border: "1px solid white"
                }
              }}
            >