Product Email

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

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

1
2
3
4
5
6
7
<tr>
    <td style="background-color: #ffffff;" class="bar">
        ...
    </td>
</tr>

<img class="btr">

Round corners in wide viewports.

Square corners in narrow viewports.

Works on Foreground Images Too
Note: Only email clients that support <style> in <head> will render this.