Definition
In email design, border refers to the CSS property that creates a visible line around an element. Borders are commonly used to separate content sections, frame CTAs, create button outlines, define table cells, and add visual structure to email layouts.
Email borders have specific CSS constraints compared to web design. Outlook (especially desktop versions) uses Word's rendering engine, which handles borders differently. Inline border styles are more reliably supported than CSS shorthand, and certain border styles (dashed, dotted) may not render consistently in older clients.
Border Usage in Email
| Border Type | CSS Property | Email Client Support |
|---|---|---|
| Solid border | border: 1px solid #000 | Universal |
| Dashed border | border: 1px dashed #000 | Modern clients, limited in Outlook |
| Dotted border | border: 1px dotted #000 | Modern clients, limited in Outlook |
| Border radius | border-radius: 4px | Modern clients, not supported in Outlook |
| Collapse | border-collapse: collapse | Table-specific, universal |
Best Practices
- Use inline border styles rather than embedded CSS for broader support
- Test border rendering in Outlook desktop where CSS support is most limited
- Use borders to create visual hierarchy, not decoration
- Ensure bordered elements have sufficient contrast against adjacent colours
- Consider using background colours instead of borders for simpler, more reliable layout separation
- For buttons, use padded table cells with borders for Outlook compatibility
Was this useful?
Related Glossary Terms
Above the Fold in Email
Above the fold in email refers to the content visible to a recipient before they scroll, a critical area for first impressions and primary calls to action.
Accessible CTA (Email)
An accessible CTA is a button or link coded with sufficient colour contrast, visible focus states, descriptive screen-reader text, and a minimum touch target of 44×44 pixels.
Adaptive Design
Adaptive design in email uses predefined layouts that adjust to specific device or client widths, rather than fluidly resizing to every possible screen.
AI-Generated Content in Email
AI-generated content in email is copy, images, code or subject lines produced by artificial intelligence tools to speed up campaign production and testing.
Alt Text
Alt text is the written alternative to an image in an email, displayed when images are blocked, slow to load, or consumed by screen readers.
Autoplay Video in Email
Autoplay video in email refers to the limited ability to play video content automatically when an email is opened, using specific client-supported techniques.
Frequently Asked Questions
Outlook desktop (2007–2019) uses Word's rendering engine, which has limited CSS border support. Border-radius does not work. Dashed and dotted borders may render as solid. For critical border elements, use table-based approaches tested specifically in Outlook.
Background colours are more reliable across email clients for separating layout sections. Use borders for framing specific elements (CTAs, featured content) and background colours for broader section separation. This approach minimises rendering risk while maintaining visual structure.