CODEWITHSUNDEEP
cssoutlook-2016
Jeeva D
Jeeva D

Reputation: 344

Border-radius property not working in outlook

I have a button in my email, which when viewed through outlook has some problems with border radius. It is not considering the styles which I give for border-radius and padding. But the same is supported in the browser and working as expected. Is there any hack to make these styles working in outlook?

 <td style="border-radius: 2px;" bgcolor="#0c6cd7">

Upvotes: 5

Views: 30089

Answers (5)

Andrii Gordiichuk
Andrii Gordiichuk

Reputation: 1939

It's not related to the Outlook. It's related to the element that you are using . Please try this:

<table>
<tr><td ><p style="border-radius: 5px; background:#0c6cd7;">test</p></td></tr>
</table>

Upvotes: -5

Jeeva D
Jeeva D

Reputation: 344

Due to its usage of the MS Word template, Outlook does not support the border-radius property. Therefore, we need to provide code that will work for Outlook as well as other email clients. Please find the below piece of code which will work for Outlook, browser or other email clients.

<td>
  <div>
    <!--[if mso]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://example.com" style="height:36px;v-text-anchor:middle;width:150px;" arcsize="5%" strokecolor="#EB7035" fillcolor="#EB7035">
        <w:anchorlock/>
        <center style="color:#ffffff;font-family:Helvetica, Arial,sans-serif;font-size:16px;">I am a button &rarr;</center>
      </v:roundrect>
    <![endif]-->
    <a href="http://example.com" style="background-color:#EB7035;border:1px solid #EB7035;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;">I am a button &rarr;</a>
  </div>
</td>

Upvotes: 11

Ashot Aleqsanyan
Ashot Aleqsanyan

Reputation: 4453

I just got the same issue. after some research, I found a website. that is helping to generate a rounded button(and so more) for outlook.

Here is the website: https://buttons.cm/

I know the question is very old, but hopefully, this will help others to resolve the problem connected with the buttons on outlook :)

Upvotes: 4

lokarkristina
lokarkristina

Reputation: 313

According to CanIEmail the border-radius property won't work in Outlook on Windows.

There could also be some issues with padding, so I would suggest working strongly with tables and filling the padding space with empty table rows/columns.

Upvotes: 4

Manohar
Manohar

Reputation: 13

Looks like your button is inside the td tag apply your styles to the button element instead of td

<td bgcolor="#0c6cd7"> <button style="border-radius: 2px;"

Upvotes: -3

Related Questions