Answer the question
In order to leave comments, you need to log in
How to round the corners of a container in email layout (outlook)?
Started using Zurb Foundarion for email layout.
You need to give the container a border-radius. In all mail servers, border-radius is displayed, but not in outlook. I use the xml code specifically for outlook, but it doesn't help. It seems to me that this is due to v: textbox, since inside the container I have not text, but table elements. Then what should be used instead?
<!--[if mso]>
<v:roundrect fillcolor="red" arcsize="35%" style="width:600;height:800">
<v:textbox style="mso-fit-shape-to-text:true">
<!--[endif]-->
<div>
<container style="border-radius:10px;overflow: hidden;" class="custom-p">
<row>
<columns class="custom-p">
Текст
</columns>
</row>
</container>
<div>
<!--[if mso]>
</v:textbox>
</v:roundrect>
<!--[endif]-->
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:w="urn:schemas-microsoft-com:office:word"
style="width:580px;height:550;"
arcsize="2%" stroke="0"
fill="t">
<!--[endif]-->
<div>
<container style="border-radius:10px;overflow: hidden;" class="custom-p">
<row>
<columns class="custom-p">
Текст
</columns>
</row>
</container>
<div>
<!--[if mso]>
</v:roundrect>
<!--[endif]-->
Answer the question
In order to leave comments, you need to log in
border-radius does not work in all browsers, but do you want it to work in mailers? Somewhere it will, somewhere it won't. These are the realities:
https://caniuse.com/#search=border-radius
If you need a nosebleed everywhere the same, in all mail - only tables and pictures. It's scary, painful, sick of such layout, I understand, but it will work.
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question