Corner Radius

Rounded corners add a modern, polished feel to email designs and work well across most email clients. The catch: Microsoft Outlook on Windows doesn't support CSS border-radius at all, because it uses Word's rendering engine to display emails. This means any corner radius you apply will render as square corners in Outlook desktop—roughly 10% of email opens.

The good news: the Email Love Figma Plugin reads your Figma corner radius values and converts them to CSS border-radius automatically. You design with rounded corners in Figma, and clients that support them will render them perfectly. Outlook users simply see square corners—which is expected and acceptable.

Corner radius can be applied to these MJML components using Figma's native corner radius controls (in the right panel under the frame dimensions):

Rounded images are one of the safest uses of corner radius in email. They work in all supporting clients and degrade gracefully to square in Outlook.

This works well for highlighting content blocks or creating visual separation between sections.

When you want a group of sections to look like a single rounded card (common for product cards or feature blocks), you need to split the corner radius across the top and bottom sections:

To prevent visible gaps between sections, make sure all sections in the group share the same background color, or wrap them in an mj-wrapper with the background color applied to the wrapper instead.

Be consistent. Pick one or two corner radius values and use them throughout your email. Mixing 8px, 16px, and 25px on different elements creates visual noise. A common approach: 8px for images and buttons, 16px for sections.

Design for the Outlook fallback. Since Outlook renders everything square, make sure your design still looks intentional with sharp corners. If your design relies heavily on rounded corners for its visual identity, preview with and without radius to confirm both versions look good.

Match your brand. If your brand's design system uses specific border-radius values on web, use the same values in email for consistency across touchpoints.

Consider the element size. A 50px radius on a small button creates a pill shape. The same 50px on a narrow section might look distorted. Scale your radius values to the element's dimensions.

Don't round everything. Strategic use of corner radius draws attention to key elements (CTAs, product images, highlighted sections). If every element is rounded, nothing stands out.

Corner radius itself isn't affected by dark mode — the rounded shape stays the same. However, if your rounded section has a background color that changes in dark mode, the contrast between the section and its surrounding area may shift. Preview your design in dark mode to make sure the rounded sections still look distinct and intentional.

Corners appear square in testing

Check which email client you're testing in. If it's Outlook on Windows, square corners are expected behavior — this is a rendering limitation, not a bug. All other major clients should show the rounded corners.

Corner radius values aren't exporting

Make sure you're setting the corner radius on the correct frame. The radius should be on the MJML component frame itself (mj-image, mj-button, mj-section, or mj-wrapper), not on a nested layer inside it. If the radius is on a child element that doesn't map to an MJML component, it won't translate to the HTML.

Rounded section has a visible gap or color bleed

This usually happens when the mj-section background color doesn't match the surrounding wrapper or body color. Set the mj-wrapper background to match the area around your rounded section, or make the section background transparent.

Different radius on different sides not working

Independent corner values (e.g., 16px top-left, 0px bottom-left) are supported on mj-section and mj-wrapper. For mj-button, some email clients apply the radius uniformly — test across clients if you need asymmetric button corners.

Rounded image looks cropped differently than in Figma

Figma's corner radius crops the image visually, but the HTML equivalent uses border-radius which may render slightly differently depending on image dimensions and the email client. If the cropping looks wrong, try adjusting the radius value or using a different image fit setting.

Need help? Reach out at support@emaillove.com or join our Discord community.