Rounded tab v2

This description rules

by Josh Davison

HTML

<div class="container">
  <div class="header">
    <div class="left">
      &nbsp;
    </div>
    <div class="middle">
      <h3>Easy right?</h3>
    </div>
    <div class="right">
      &nbsp;
    </div>
  </div>
  <div class="body">
    <p>
      This shape is more complicated than it looks...
    </p>
  </div>
</div>
<br>
<br>
<br>
<div class="container">
  <div class="header red">
    <div class="left">
      &nbsp;
    </div>
    <div class="middle">
      <h3>Or is it?</h3>
    </div>
    <div class="right">
      &nbsp;
    </div>
  </div>
  <div class="body">
    <p>
      ...because of the corners highlighted in red.
    </p>
  </div>
</div>

CSS

body {
  background: #e5e5e5;
}

.header {
  display: flex;
  flex-direction: row;
  justify-content: middle;
  align-items: stretch;
  background: #ffffff;
  text-align: center;
}

.left,
.middle,
.right {
  flex: auto;
  background: #e5e5e5;
}

.left {
  border-radius: 0 0 1em 0;
}

.right {
  border-radius: 0 0 0 1em;
}

h3 {
  background: #fff;
  margin: 0;
  padding: 1em;
  border-radius: 1em 1em 0 0;
}

.body {
  background: #fff;
  padding: 1em;
  border-radius: 1em;
}

.red {
  background: red;
}