Border-radius property not working in outlook

Question

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">

score 8 · Accepted Answer · answered Dec 27 '19 at 10:17

border-radius property is not supported by outlook, as it uses MS-word template. we need to code for outlook too. Please find the below piece of code which will work for both outlook and 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>

@AliAlizade Please use the above snippet to adjust your border radius. outlook uses a template where the border radius is not supported, hence we are writing it here. — Jeeva D, Sep 07 '22 at 13:07

score 3 · Answer 2 · answered Dec 24 '19 at 08:19

3

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.

answered Dec 24 '19 at 08:19

lokarkristina

305
4
9

What u told is exactly correct!. I am using tables as u said. but, in that for the border radius property even padding doesn't help out. So I have researched and found something which helped to solve my issue. please find my answer below. – Jeeva D Dec 27 '19 at 10:21

Ashot Aleqsanyan · Answer 3 · 2022-10-26T17:51:18.670

3

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 :)

edited Oct 26 '22 at 17:51

answered Oct 26 '22 at 17:23

Ashot Aleqsanyan

4,252
1
15
27

score -2 · Answer 4 · answered Dec 24 '19 at 07:37

-2

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;"

answered Dec 24 '19 at 07:37

Manohar

15
2

This doesn't work, see other answers. Outlook ignores the `border-radius` style. – BryanH Sep 27 '22 at 17:21

score -4 · Answer 5 · answered Dec 24 '19 at 09:13

-4

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: 2px; background:#0c6cd7">test</p></td></tr>
</table>

Or you can use separate CSS, but it might be effect other styles:

table tr td {
  border-radius: 2px;
  display: block;
  background:#0c6cd7;
}

<table>
<tr><td >test</td></tr>
</table>

answered Dec 24 '19 at 09:13

Andrii Gordiichuk

1,783
1
12
10

This doesn't work. Outlook's use of Word templates limits functionality of html-based emails. It is really a poor choice, probably left over from their attempt to take over HTML. – BryanH Sep 27 '22 at 17:20

Border-radius property not working in outlook

5 Answers5