Is there a way to make negative border-radius in tailwindcss?

I want to create a "header-menu" when selected has the effect and the border-radius (all effect I have done but bottom border radius).

Here is my code of that part:

w-[full] h-[60px] relative 
flex flex-row items-center justify-center 
pt-[17px] pb-[17px] px-[28px] 
box-border gap-2.5 text-left text-[18px] 
leading-[30px] font-semibold bg-white text-[#0A98E7] 
rounded-t-[10px] rounded-b-[10px] 
-mb-[5px] z-10 border-t border-l border-r border-white 
whitespace-nowrap

the result of code above

I expecting the result look as shown in this screenshot:

enter image description here

Solution

First, remove the bottom border radius and borders. We need to implement the bottom border in a completely different way to the top border radii. The borders are supurfluous.

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.0.17"></script>

<div class="bg-sky-600 pt-10">
  <div class="w-fit mx-auto">
    <div class="w-[full] h-[60px] relative flex flex-row items-center justify-center pt-[17px] pb-[17px] px-[28px] box-border gap-2.5 text-left text-[18px] leading-[30px] font-semibold bg-white text-[#0A98E7] rounded-t-[10px] -mb-[5px] z-10 whitespace-nowrap">
      Manager
    </div>
  </div>
</div>

Use SVGs for the bottom border radii, for each corner. We size them as the same as the top border radii, and with the same color as the background color. To keep things DRY, we use CSS variables to track the value for these. This means the values stay linked. This means if you need to change either the background color or the radii, you only need to change it in one place.

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.0.17"></script>

<div class="bg-sky-600 pt-10">
  <div class="w-fit mx-auto">
    <div class="relative w-[full] h-[60px] relative flex flex-row items-center justify-center pt-[17px] pb-[17px] px-[28px] box-border gap-2.5 text-left text-[18px] leading-[30px] font-semibold bg-(--bg) text-[#0A98E7] rounded-t-(--radius) -mb-[5px] z-10 whitespace-nowrap [--radius:10px] [--bg:var(--color-white)]">
      Manager
      <svg viewBox="0 0 10 10" class="absolute right-full bottom-0 size-(--radius) fill-(--bg)" aria-hidden="true">
        <path d="M0 10A10 10 0 0 0 10 0v10z"/>
      </svg>
      <svg viewBox="0 0 10 10" class="absolute left-full bottom-0 size-(--radius) fill-(--bg)" aria-hidden="true">
        <path d="M0 0A10 10 0 0 0 10 10H0z"/>
      </svg>
    </div>
  </div>
</div>