[SOLVED] How to get a round images in html emails working in Outlook with VML?

How to get a round images in html emails working in Outlook with VML?

I'm trying to get a circular image to appear in an HTML email. So far it's working in all clients except for Outlook 2013 and Outlook 2016 (Windows 7).

I found some VML tutorial that says this should do the trick:

<v:oval style="width:100;height:100">
<v:fill src="https://www.placebear.com/100/100.jpg" type="frame">
<v:/fill>
</v:oval>

However I tried it with conditional comments

<!--[if !mso]><!-- -->
  <v:oval style="width:100;height:100">
    <v:fill src="https://www.placebear.com/100/100.jpg" type="frame">
    <v:/fill>
  </v:oval>
<!--<![endif]-->

and nothing appeared.

Anybody have a working solution? Border-radius is doing the trick for every othe client but Outlook, because of course...

Solution

I'd suggest changing your Outlook conditionals to this.

<!--[if (gte mso 9)|(IE)]>

<![endif]-->

Currently, you are hiding it from Outlook. If the VML proves too troublesome I'd recommend using a rounded image asset on a transparent background.