Jack :
Hacer la pestaña en una imagen PNG. Aquí está uno que hice muy rápido. Tengo un borde en la parte superior y sin borde en la parte inferior por lo que se superpondrá a la toma de frontera existente aparecerá como curva mirando hacia arriba
Luego combine con un poco de estilo para obtener su resultado
*:focus {
outline: none;
}
.content {
background-color: #F7F7F7;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.tabs {
margin-bottom: -1px;
background-color: white;
border: 1px solid #F4C949;
border-radius: 20px;
padding: 0px 20px;
padding-top: 32px;
}
.tab {
position: relative;
z-index: 2;
display: inline-block;
width: 175px;
height: 30px;
margin-bottom: -6px;
padding-top: 8px;
text-align: center;
}
.tab:focus {
background: url(https://i.stack.imgur.com/45ecy.png);
background-size: contain;
background-position: top;
background-repeat: no-repeat;
}
.tab-content {
height: 150px;
padding: 16px;
border: 1px solid #F4C949;
border-radius: 20px;
}
<div class="content">
<div class="tabs">
<div class="tab tab-active" tabindex="0">
Tab 1
</div>
<div class="tab" tabindex="0">
Tab 2
</div>
</div>
<div class="tab-content">
Click tab to get the effect
</div>
</div>