Sections
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.
Classes
Section titled Classes| 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. |
Example
Section titled Example<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.