How to give rounded corners to a container for Microsoft Outlook email clients?

Question

I have been trying to create a let's call it a badge component for the email design. It looks like this: . It renders perfectly for all email clients except Microsoft Outlook because of its rounded corners. I do know that MSO does not support border-radius so I tried using VML that is as follows:

    <span>
      {`<!--[if mso]>
          <v:roundrect
          xmlns:v="urn:schemas-microsoft-com:vml"
          xmlns:w="urn:schemas-microsoft-com:office:word"
          style="v-text-anchor:middle;height:20px;width:55px;"
          arcsize="50%"
          stroke="f"
          fillcolor="#EEEEEE">
            <w:anchorlock/>
            <center style="font-family:Arial,sans-serif;font-size:12px;font-weight:normal;line-height:20px;">`}
      {props.text}
      {`</center>
          </v:roundrect>
          <![endif]-->
          <!--[if !mso]><!-->`}
      <span className={`badge-${props.type}`} style={{ ...BADGE_STYLES, backgroundColor: bgColor }}>
        {props.text}
      </span>
      {'<!-- <![endif]-->'}
    </span>

Now I can see the component with rounded corners but without text like this: The width and height are fixed. If I increase the height I can see that the text is there eg but with the required height it is not there like the overflow is hidden. How can I achieve the desired design for the component in MSO or what am I missing? I'll really appreciate the help. Thank you.

Answer 1

MS Outlook appears to require a minimum padding in its rendering of the 'roundrect'.

As such it may be a bit bigger than other badges.

But, you can improve this. You have a line-height of 20px but the font-size is 12px. It's only one line, so this produces a gap. Remove it.

Second, you can wrap the <center> text in mso with a textbox and style mso-fit-shape-to-text:true (HT: https://stackoverflow.com/a/48178955/8942566 ), so it doesn't get clipped, like my test sample:

<!--[if mso]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="mso-wrap-style:none; mso-position-horizontal: center;height:20px;" arcsize="50%" stroke="f" fillcolor="#333333">
        <v:textbox style="mso-fit-shape-to-text:true">
        <center style="font-family:Arial,sans-serif;font-size:12px;font-weight:normal;color:#eeeeee">badge</center>
        </v:textbox>
      </v:roundrect>
      <![endif]-->
      <!--[if !mso]><!-->
  <span style="font-family:Arial,sans-serif;font-size:12px;font-weight:normal;line-height:12px;border-radius:50px;background-color:#333333;color:#eeeeee;padding:3px 4px">
    badge
  </span>
  <!-- <![endif]-->

mso-position-horizontal: center; is a way of centering the text within the shape.