메뉴 건너뛰기

검색창 닫기

HEUKMYO

Html/css

etc 이메일별 border-radius 처리 방법

흑묘 2017.03.14 14:58 read.64941

Border-Radius Support in Email.

Just a follow up from a Twitter conversation.

Here is a quick button I threw together using Border-radius:

<table border="0" cellpadding="10" cellspacing="0" width="150">
        <tr>
            <td align="center" style="background: #2fbf6f; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border-bottom: 2px solid #03883e !important;" valign="top">
                <a href="##" style="color: #FFFFFF; display: block; font-size: 16px; font-weight: bold; text-align: center; text-decoration: none; text-transform: uppercase; font-family:Arial, Helvetica, sans-serif;">Order now</a>
            </td>
        </tr>
    </table>

And here's how it degrades across email clients.
Note: Some of the colours/sizes are off as they were screenshots taken from different testing areas/platforms.
Note2: As RedFerret pointed out - if you remove !important from the code above the border will display on Outlook 2007/2010/2013.

BNIxlsoCQAAb6Ys.jpg

출처: https://www.campaignmonitor.com/forums/topic/7666/borderradius-support-in-email/



추가메뉴 목록
위로