M
M
Mariana Marianova2018-03-23 13:34:57
HTML
Mariana Marianova, 2018-03-23 13:34:57

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]-->

PS
I figured it out. Maybe it will come in handy for someone:
Using the xml code, you can Make a border-radius for outlook: You
just need this construction (the one that is commented out):
<!--[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

1 answer(s)
M
Maxim Timofeev, 2018-03-23
@webinar

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 question

Ask a Question

731 491 924 answers to any question