ES1
Rounded Image Outlook
Hi :)
I have a newsletter design with rounded image like image 
I've added CSS attribute "border-radius: 50%;" but it doesn't work on outlook.
Is there a solution to this problem ?
Thanks in advance.
ESESHi :)
I have a newsletter design with rounded image like image
I've added CSS attribute "border-radius: 50%;" but it doesn't work on outlook.
Is there a solution to this problem ?
Thanks in advance.
Hi Esraa, you van use VML for that. I did some experimenting with it in the past: https://litmus.com/builder/32e80d7
It works, thanks a lot, ^_^
Hi Esraa!
We loved your great question and Wilbert's fantastic solution to it, so we covered it in today's version of our Email Design Podcast. Check out the details here: https://litmus.com/blog/email-design-podcast-82-litmus-community-qa-rapid-fire
Hello, the answer posted is no longer available. Would anybody be able to post the solution here again?
Hi Barbara,
I found it. It's from a couple of years ago so let me know if you bump into anything.
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if (mso)|(IE)]>
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />
<style>v: * { behavior:url(#default#VML); display:inline-block }</style>
<meta charset="utf-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="format-detection" content="telephone=no" />
<title></title>
<style type="text/css">
.hide {
display: block;
}
</style>
<!--[if (gte mso 9)|(IE)]>
<style>
.hide {
display: none;
}
</style>
<![endif]-->
</head>
<body>
<!--[if (gte mso 9)|(IE)]>
<v:oval xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:100px;width:100px;" fill="t" stroke="f">
<v:fill type="frame" color="red" src="https://placem.at/places?w=150&h=150" style="height:100px;width:100px;"/>/v:oval
<![endif]-->
<!--[if !IE]><!-->
<table class="hide" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100" style="width: 100px; mso-hide: all;">
<tr>
<td><div style="-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; overflow:hidden!important; mso-hide: all;"><img src="https://placem.at/people?w=150&h=150" border="0" width="100" height="100" alt="" style="display: block;" /></div></td>
</tr>
</table><!--<![endif]-->
</body>
</html>
Hi Barbara,
I found it. It's from a couple of years ago so let me know if you bump into anything.
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if (mso)|(IE)]>
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />
<style>v: * { behavior:url(#default#VML); display:inline-block }</style>
<meta charset="utf-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="format-detection" content="telephone=no" />
<title></title>
<style type="text/css">
.hide {
display: block;
}
</style>
<!--[if (gte mso 9)|(IE)]>
<style>
.hide {
display: none;
}
</style>
<![endif]-->
</head>
<body>
<!--[if (gte mso 9)|(IE)]>
<v:oval xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:100px;width:100px;" fill="t" stroke="f">
<v:fill type="frame" color="red" src="https://placem.at/places?w=150&h=150" style="height:100px;width:100px;"/>/v:oval
<![endif]-->
<!--[if !IE]><!-->
<table class="hide" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100" style="width: 100px; mso-hide: all;">
<tr>
<td><div style="-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; overflow:hidden!important; mso-hide: all;"><img src="https://placem.at/people?w=150&h=150" border="0" width="100" height="100" alt="" style="display: block;" /></div></td>
</tr>
</table><!--<![endif]-->
</body>
</html>
Thank you very much for your answer : )