Border radius
Border radius classes are provided as a progressive enhancement to email containers. The border radius on containers are removed at smaller breakpoints, once the width of the container matches the width of its viewport.
| Class | Output | Use Case |
|---|---|---|
| .bar | border-radius: 5px; | Rounding all four corners of a simple email. |
| .btr | border-top-left-radius: 5px; border-top-right-radius: 5px; |
Rounding the top corners of a complex promotional email in one location… |
| .bbr | border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; |
…and rounding the bottom corners in another location. |
<tr>
<td style="background-color: #ffffff;" class="bar">
...
</td>
</tr>
<img class="btr">
Note: Only email clients that support
<style> in <head> will render this.