Build a Component for Rounded Containers with Rich Content

• Component or Package Name: jsx-email
• Component or Package Version: 2.7.0

Feature Use Case

I have a Button that has rich content and rounded corners. This renders perfectly fine for modern Clients but does not work with Outlook: It generates a roundrect vml that displays a rounded button, but the rich content is not inside that button but rendered below.

There is a hack for this using shapes in the corners with additional table cells:
https://kontent.ai/blog/emails-outlook-containers-rounded-courners/

I can write this using the <Raw /> and <Conditional /> component, but this is tedious.

Feature Proposal

I would like to have a Component or option in existing components that does this automatically. For example, when using a <Container />, it should optimally recognize the Tailwind "rounded" class and add the vml comments from the article above. I don't know if that already happens, otherwise this sounds like a lot of work. Alternatively a simple <RoundRichContainer /> which always places these would also suffice.

Thank you in advance for considering it.

Start by reviewing the existing Container, Raw, and Conditional components and how Tailwind rounded classes are handled. Compare their output with the linked Outlook rounded-container approach. Done means a reusable component or option renders rich content inside rounded containers in Outlook without requiring manual Raw and Conditional markup.