HTML Email Dividers
Dividers help break up sections of your email and create visual breathing room between blocks of content. Since HTML emails don’t fully support modern CSS, we use simple methods that are reliable across all major email clients.
You can create dividers with borders, spacer tables, or hr elements—with some important limitations.
➖ Dividers
Dividers help break up sections of your email and create visual breathing room between blocks of content. Since HTML emails don’t fully support modern CSS, we use simple methods that are reliable across all major email clients.
You can create dividers with borders, spacer tables, or hr elements—with some important limitations.
✅ Best Practices
| Tip | Why It Matters |
|---|---|
| Use table-based spacing or border-bottom lines | Works better than relying on unsupported hr styles |
Avoid using <hr> alone | It’s not reliable in all email clients, especially Outlook |
| Use consistent height and color | Helps maintain a clean and professional design |
| Keep spacing tight | Don’t overuse dividers—they should support content flow, not interrupt it |
Common Divider Methods
1. Border-Bottom Divider (Most Common)
Use a td with a bottom border to create a simple line.
See the Pen Border-Bottom Divider (Most Common) by Email Code Camp (@EmailCodeCamp) on CodePen.
This creates a clean, 1px line with space above it. Adjust height and color as needed.
2. Spacer Table Divider (For Visual Gaps)
Sometimes you just want some extra space without a visible line.
See the Pen Spacer Table Divider (Visual Gaps) by Email Code Camp (@EmailCodeCamp) on CodePen.
Use this between sections to add vertical padding.
3. Styled <hr> (Use with Caution)
While not fully reliable, some clients do support basic <hr> elements. Inline style it as much as possible.
See the Pen Styled HR by Email Code Camp (@EmailCodeCamp) on CodePen.
Test it carefully—Outlook often ignores or mishandles <hr> tags.
📐 Divider Styling Tips
Add inside divider <td>s to avoid rendering issues in some clients
Stick to neutral or branded colors like #e0e0e0, #cccccc, or #dcdcdc
Keep borders 1–2px thick to avoid heavy visual weight
Always include line-height and height to ensure spacing is respected