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
Related Glossary Terms
Dark Mode
Dark mode in email refers to how email clients render messages when the recipient has dark mode enabled. It affects colour display, image rendering, and readability. Designers use CSS media queries and hybrid coding techniques to control the dark mode appearance.
Drag-and-Drop Email Editor
A drag-and-drop email editor is a visual interface that allows marketers to build email layouts by dragging content blocks into place without writing HTML or CSS code.
Email Accessibility Guidelines
Email accessibility guidelines ensure emails are usable by people with disabilities, following WCAG standards for screen readers, colour contrast, keyboard navigation, and readable content.
Email Accessibility
Email accessibility ensures marketing emails are usable by people with disabilities, including those using screen readers, keyboard navigation, or assistive technologies. It follows WCAG 2.1 guidelines for structure, contrast, semantics, and descriptive content.
Attachment
An email attachment is a file sent along with an email message — while common in personal and business correspondence, attachments are generally discouraged in marketing emails due to security, deliverability, and compatibility concerns.
Email Body
The email body is the main content area of an email message, containing the visible text, images, and structural elements that communicate the message to the recipient.
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.