Rounded corners add modern, friendly touches to your email designs and work well across most email clients. Here's how to implement them effectively using the Email Love Figma plugin with our MJML framework.
What You Can Round
Corner radius can be applied to these MJML components:
- mj-image: Product photos, hero images, avatars
- mj-button: Call-to-action buttons, navigation elements
- mj-section: Content blocks, hero sections, footers
- mj-wrapper: Entire email containers or major layout sections
Email Client Support
Works Great:
- Mobile email clients
- Most desktop webmail clients (Gmail, Yahoo, etc.)
Limited Support:
- Microsoft Outlook (all Windows versions)
Note: Don't worry about Outlook's limitations - users expect square corners there anyway!
Basic Corner Radius Techniques
Rounding Images (mj-image)
- Select the image frame in Figma
- In the right panel, find the "Appearance" section
- Locate the corner radius controls
- Enter your desired pixel value (e.g., 25px) for all corners
- For custom corners, use the four separate input fields
Rounding Buttons (mj-button)
- Select your button component
- Adjust the corner radius value in the appearance panel
- Try different values:
- 5px: Subtle rounded corners
- 25px: Moderate rounding
- 100px: Fully rounded (pill-shaped) button
Rounding Content Sections (mj-section)
- Select your section component
- Apply corner radius in the appearance panel
- This affects the entire content block within that section
Rounding Email Containers (mj-wrapper)
- Select the wrapper container
- Apply corner radius (e.g., 50px)
- Creates a cohesive rounded look for major layout sections
Advanced Techniques
Multi-Section Components
When working with components that span multiple mj-sections:
- Top section: Apply corner radius to top corners only (25px top, 0px bottom)
- Bottom section: Apply corner radius to bottom corners only (0px top, 25px bottom)
- Middle sections: Keep square corners (0px all around)
Background Color Matching with mj-wrapper
For seamless rounded sections:
- Match the mj-wrapper background color to adjacent sections
- Apply corner radius to the mj-section within the wrapper
- This prevents color bleeding around rounded corners
Best Practices
Recommended Pixel Values
- Subtle: 5-10px
- Moderate: 15-25px
- Bold: 50px+
- Fully rounded: 100px
When to Use Corner Radius
- mj-image: Almost always beneficial, especially product photos
- mj-button: Creates modern, clickable appearance
- mj-section: Great for highlighting important content blocks
- mj-wrapper: Use for major layout divisions or full email rounding
Design Consistency
- Use consistent corner radius values throughout your email
- Match your brand's overall design language
- Consider your audience - B2B emails might prefer subtle rounding
Testing Your Designs
The Email Love plugin works with email testing tools to show you how your rounded corners render across different clients. Pay special attention to:
- Mobile rendering (usually excellent)
- Webmail clients (generally good support)
- Outlook behavior (expect square corners)
Troubleshooting
Corners not rendering?
- Check if you're testing in Outlook
- Verify corner radius values aren't too large for your component size
- Ensure background colors are properly set on parent mj-wrapper components
Inconsistent appearance?
- Use matching corner radius values across related mj-buttons and mj-sections
- Check that mj-wrapper and mj-section colors are coordinated
Powered by