Using CSS circles in Email

Question

I'm trying to create a nice round circle with a number in the middle, I have it working fine in my browser, but when I go to send in MailChimp the circles become huge squares.

This is my CSS

.circle{
    width:100px;
    height:100px;
    border-radius:50px;
    font-size:20px;
    color:#ffffff;
    line-height:100px;
    text-align:center;
    background:#ff8080

    }

Then I am using -

<div class="circle">1</div>

This is in my browser - Circle in Browser This is in Outlook - Cirlces in Outlook

Answer 1

I found a fix that works perfectly -

<div align="center"><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:100px;v-text-anchor:middle;width:100px;" arcsize="600%" stroke="f" fillcolor="#ff8080">
<w:anchorlock/>
<center>
<![endif]-->
  <a href="http://"
  style="background-color:#ff8080;border-radius:600px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:100px;text-align:center;text-decoration:none;width:100px;-webkit-text-size-adjust:none;">1</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>