Any approaches for how to get rid of this dividing line?

Hey I'm working on a tab-based thing like this. I use a bunch of inset box shadows to create this nice rounded look. Ideally I'd like to not have that dividing line separating the header with the body. I can't really post a little code snippet since this brings together tons of libraries in an electron app. This stuff is scattered all over but essentially the dom looks like below

pseudo code:
<div class="panel">
  <header class="overflow-hidden nice-inset-shadows-and-borders">
  </header>
  <div class="nice-inset-shadows-and-borders">
  </div>
</div>


The limitation I'm facing is that the header has overflow: hidden so i can't create a pseudo element that goes below. The tab also has dynamic width which makes this more complicated and you can have multiple tabs

Does somebody know an approach for how to do this that I may not know?
image.png
Was this page helpful?