Flexible Border Element

I recently transitioned from full stack to front end engineer. Front end is what inspired me to become an engineer and returning to a front end focus has reinvigorated my desire to play with code in my free time. I picked a project on Frontend Mentor and have been building it out on the weekends. Here is what I am building: It was going really well; I was building out components, implementing theming and familiarizing myself with Tailwind when I got stumped by the card border. Border Issues I already knew that it could be challenging working linear-gradient borders, so I decided to wait on the Instagram card and focus on the solid color borders. It was easy to add a top border to a card with a border-radius, but it didn’t look like the design. The border had a curve on the corner that I didn’t like. <div className="rounded-lg border-t-4 border-red-700 flex flex-col items-center gap-6 bg-card py-6 w-[300px]" > {/* Card content */} </div> Rather than stalling my progress by figuring this