[SOLVED] vml email code for curved only the one side of the frame

vml email code for curved only the one side of the frame

I'm working on a custom email template:

    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://google.com" style="height:225px;v-text-anchor:middle;width:600px;" arcsize="45%,0,0,45%" strokecolor="#fffefe" fill="t">
    <v:fill type="frame" src="https://www.shutterstock.com/image-vector/childrenkids-playground-swing-slide-climbing-260nw-1930215425.jpg" color="#F8F7F1" />
    <w:anchorlock/>
    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">.</center>
  </v:roundrect>

I'm trying to curve only the left side but instead, it is curving all the corners, is it even possible to curve only the left side?

Solution

A RoundRect element can only apply the same curve to all sides. What you can use instead is a Shape element with a custom Path element.

Here's what it would look like in your example:

<v:shape xmlns:v="urn:schemas-microsoft-com:vml" style="height:225px;v-text-anchor:middle;width:600px;" fill="true" stroke="true" strokecolor="#fffefe" coordorigin="0 0" coordsize="600 225">
    <v:fill type="frame" src="https://i.imgur.com/PkQE6Em.png" color="#F8F7F1" />
    <v:path v="m 45,0 l 600,0 l 600,225 l 45,225 qx 0,180 l 0,45 qy 45,0 x" />
</v:shape>

In this example, I'm setting a 45px rounded corner on the top left and bottom left. In order to do this, I first defined the coordsize attribute to be the same size of the VML shape. This will make it easier to then define the actual path of the shape in the v attribute.

Here's how the values in this v attribute work:

m 45,0: Start drawing a shape at the point 45,0.
l 600,0: Draw a line to the point 600,0 (the top right corner).
l 600,225: Draw a line to the point 600,225 (the bottom right corner).
l 45,225: Draw a line to the point 45,225 (just before the start of the bottom left rounded corner).
qx 0,180: Draw the bottom left arc to the point 0,180.
l 0,45: Draw a straight line up to the point 0,45.
qy 45,0: Draw the top left arc to the point 0,45.
x: Close the shape.

If you want to adjust the radius, you can change the 45 values into what you want and the 180 values into the difference between the height of the shape and your radius. (Here it’s 225 - 45.)