We all like emails with adorable and interesting designs, and today we will show you how you can make the email more attractive using rounding.
Please, be advised that you can make rounding only for containers and structures.
How corners are rounded in Stripo
When we are making corners for some element rounded (either a structure or a container), the rounding is applied only to that element, not to the content of it.
Let's say, we have a container with a blue background color, which contains a text block with yellow background. When the rounding is applied, we will see blue rounded corners, while the text block inside will still have square yellow corners:
Hence, if a text block takes up the full space of its container, it must have no background color (or have "transparent" color) so we could see rounded corners of the container under it. Otherwise, rounded corners of a container will be hidden under the square corners of a text block.
In our case with the yellow text block, we cannot see the container's corners:
But once we've made the text block transparent, we can see the container's corners now:
We just have to keep that in mind when making corners rounded.
Let's see how we can add border-radius to the container:
Select a container and set the background image or background color (if necessary) in the menu on the left side;
Important to note:
- if you are going to add a background image to the container, it is necessary that the image fit the dimensions of the container itself (its width and height). Otherwise, the image will be non-responsive;
- do not add a background image or background color to the block, because it will interrupt the styles of the container and you won't see rounding.
add "rounding" to the container.
Now, let's see how we can add border-radius to the structure:
Select the desired structure and set the background image or background color (if necessary);
Perform the rounding.
By the way, you can set separate rounding for different sides of the structure.
How to add rounded corners to an image
If you have a PNG image, you can easily make its corners rounded. Stripo has a built-in image editor for that purpose.
A format of an image file matters because a PNG image will have transparent empty space around its corners, while the JPEG's corners will be surrounded with black color, because JPEG does not support transparency.
Please, select an image and click on the "Magic wand":
Then apply rounding to the image and save it:
Now our PNG image has rounded corners:
Thank you for taking the time to read our articles. We hope you will find this information helpful.
If you have any additional questions, please email us at firstname.lastname@example.org.
We would be glad to talk with you.