How to connect two rectangles together with rounded connections, like tabs?

Question

In the Chrome web browser, tabs have a rounded connection to the white bar beneath them:

I was wondering how to achieve this effect on the following code, preferably with pure CSS.

#bar {
  width: 200px;
  height: 50px;
  background-color: gray;
}

.tab {
  width: 75px;
  height: 25px;
  background-color: lightgray;
  border-radius: 8px 8px 0 0;
  margin-left: 1rem;
}

.flex {
  display: flex;
}

<div class="flex">
  <div class="tab"></div>
  <div class="tab"></div>
 </div>
<div id="bar"></div>

Thank you for any help!

Answer 1

I would probably solve it using clip-path CSS property to define the shape of the active element (see also the d attribute reference). The active element also has to be made bigger, so the "feathers" on sides can be displayed, along with negative margin to compensate for bigger size, so the elements don't move. Finally, you need to set z-index higher, so the feathers are displayed above other tabs.

Normally, you would probably define CSS variables to define the arc radius, tab width and height, and calculate the path from those.

#bar {
  width: 300px;
  height: 50px;
  background-color: gray;
}

.tab {
  width: 75px;
  height: 25px;
  background-color: lightgray;
  margin-left: 0;
  text-align: center;
}

.tab:active {
  background-color: gray;
  margin: 0 -10px;
  width: 95px;
  z-index: 10;
  clip-path: path('M 0 25 A 10,10 0,0,0 10,15 L 10 10 A 10,10 0,0,1 20 0 L 75 0 A 10,10 0,0,1 85 10 L 85 15 A 10,10 0,0,0 95 25');
}

.flex {
  display: flex;
  width: 300px;
  justify-content: center;
}

<div class="flex">
  <div class="tab">Click me</div>
  <div class="tab">Click me</div>
  <div class="tab">Click me</div>
 </div>
<div id="bar"></div>

Answer 2

Another possibility is to use border-radius. The "trick" here is to add an extra element next to the tabs, with the same border-radius values (on the relevant corners) but opposite background colours (so the tab has white at the front and grey behind, while the before and after elements have grey at the front and white behind):

<div class="flex">
  <div class="tab-area">
    <div class="before"></div>
    <div class="tab"></div>
    <div class="after"></div>
  </div>
</div>

The tab itself has border-radius: 5px 5px 0 0;, while the .before class has border-radius-bottom-right: 5px; and the .after class has border-radius-bottom-left: 5px;.

You can further neaten this up by using ::before and ::after but getting the backgrounds right in that case gets confusing so I generally accept the extra HTML elements!