Is it possible to do a three part separating bar () with CSS?

I am trying to replicate the Nintendo Wii Menu separating bar with CSS on React JS and Tailwind (the blue one, sorry for the bad resolution):

As you can see, the bar goes straight, then down, then straight, then up and straight again.

I tried separating the bar in three. First, the left part, then the middle and then the right part, using border radius and box-shadow, but my main problem is that the radius gets thinner on edges and when combining it with the other bar, the edges don’t merge together. Here’s the code of the left and middle part (I didn’t bother making the right part) and part of the clock and date:

.mm-left-box {
    width: calc(50% - 8rem);
    height: 100px;
    background-color: rgb(209 213 219 / var(--tw-bg-opacity));
    transform: translateX(-17rem);
    position: absolute;
    border-bottom-right-radius: 50%;
    padding-bottom: 1rem;
    padding-top: 1rem;
}

.mm-left-bar {
    border-top: 4px solid #00c4ff;
    border-radius: 50px;
    box-shadow: 0 -2px #00c4ff;
}

.mm-bar {
    border-top: none;
    border-bottom: 6px solid #00c4ff;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

<footer className="relative">
    {/* Left Line */}
    <div className="left-0 top-0">
        <div className="mm-left-box mm-left-bar"></div>
    </div>

    {/* Current Date and Time and Middle Line*/}
    <div className="flex justify-center items-center">
        <div className="pb-16 relative z-10 bg-gray-300">
            <div className="mm-bar mm-striped-bg bg-white font-mono pb-3 text-gray-400 text-5xl px-80">
                {formattedTime}
            </div>
            <div className="font-rodin text-4xl text-gray-500 text-center ">
                <strong>{currentDate}</strong>
            </div>
        </div>
    </div>
</footer>