CSS Curved Tabs like Google Chrome

Question

I'm using Material UI Tabs in React to implement curved tabs (imagine like ones shown in Google Chrome). The structure must be such that the parent can give a bottom border which should stretch across the entire row making this bottom-border appear on tabs as well as on some other content on right. The selected (or active) tab, however, must remove the bottom border applied on it by its parent.

Expected Result:

Current Result:

The border from parent gets applied over the selected tab too, which is not what I want.
Here's the CodeSandbox link for my code.

Approach Taken:
I tried creating an ::after pseudo-element positioned absolute for selected tab with higher z-index. This pseudo-element creates a white-colored horizontal line and patches it over the bottom border applied by parent to overlap parent's border. However, I could not make it work. There were a couple of other CSS changes I applied; none seemed to move the parent's border. Any help to correct the existing approach I'm taking or suggesting a new approach to get the desired result is appreciated.

(Please note that I want to keep using Material UI Tabs as the base.)

On a side note, could anyone help why there's also some lag when selecting a tab?

Answer 1

Here is a way you can get your desired effect. Remove the parent bottom border, add a new css selector so you can give tabs that arent .MuiSelected a bottom border, then give the someother content div a bottom border so the grey line continues for the full length of the page (the grey is a slightly different shade cause of mui, but you could specifically set it to the right color):

https://codesandbox.io/s/curvy-tabs-using-material-ui-forked-lx57sw?file=/src/App.js

subtabs

import styled from "@emotion/styled";
import MuiTabs from "@material-ui/core/Tabs";

export const StyledSubTabs = styled(MuiTabs)`
  .MuiButtonBase-root.MuiTab-root {
    background: white;
    border-radius: 8px 8px 0 0;

    :hover {
      background: pink;
    }
  }

  .MuiButtonBase-root.MuiTab-root.Mui-selected {
    border-top: 3px solid gray;
    border-left: 3px solid gray;
    border-right: 3px solid gray;
    border-bottom: none; /* not working */
    z-index: 10;

    :hover {
      background-color: pink;
    }
  }
//
//added this
//
  .MuiButtonBase-root.MuiTab-root {
    border-bottom: 3px solid gray;
    z-index: 10;

    :hover {
      background-color: pink;
    }
  }

  .MuiTabs-indicator {
    display: none;
  }
`;

app.js

import React, { useState } from "react";
import Tab from "@material-ui/core/Tab";
import { StyledSubTabs } from "./SubTabs.styles";

const App = () => {
  const [index, setIndex] = useState(0);
  const handleChange = (event, newIndex) => {
    console.log("SubTab - index", newIndex, event);
    setIndex(newIndex);
  };

  const parentStyles = {
    // remove this ---->  borderBottom: "3px solid gray",
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center"
  };

  return (
    <div style={parentStyles}>
      <StyledSubTabs value={index} onChange={handleChange}>
        <Tab label="Tab 1" />
        <Tab label="Tab 2" />
        <Tab label="Tab 3" />
      </StyledSubTabs>
      <div
//added this
        style={{
          borderBottom: "3px solid gray",
          height: 45,
          flexGrow: 1
        }}
      >
        Some Other Content
      </div>
    </div>
  );
};

export default App;