Adding rounded corners to images is a good way to make them stand out. Round pictures and avatars are gaining popularity in UI design but are not so common when it comes to the sender’s photo added to email signatures. This article presents how to add rounded corners to any image in an HTML email and when it might be better to avoid them.
How to add images with rounded corners in HTML
The procedure of adding rounded corners to images in HTML emails is the same as on any website. All you need to do is add the right CSS styling attribute to your image in the message’s HTML code. It is easier than it sounds. I will show how to do it on a sample email signature generated using this free email signature generator.
This template applies rounded corners to the sender photo without the need to change anything. You can simply upload your square photo and watch it change into a circle automatically. Then follow the steps available in the generator to personalize your template and apply it to a selected email client.
To apply the same circle cropping effect to any other image in any other signature template, you need to access the HTML code of this template. To do so in the generator, select a template you want, set it up as you like, choose Thunderbird as your email platform and click Apply your signature.
Next, click Generate HTML and copy the HTML to the clipboard:
Now that the HTML code of the signature is copied to the clipboard, launch Notepad (or any other text editor) and paste this code into a new file. Use Ctrl+F to look for your image and add border-radius:50%; to the style attribute, as shown in the screenshot below. This will display the photo in a circular format. You can use lower values of the border-radius parameter – it will cause the edges to be less rounded. Do not worry about going above 50%, browsers will treat higher values as 50% exactly.
If you need a plain HTML code of your signature, you can copy the whole content of this notepad file to the destination of your choosing. In most cases, however, you will need to perform two additional steps. First, save your image as a HTML file. To do so, you can use the Ctrl+Shift+S key combination to access the save as window. Choose any location, name your signature, ending its name with the .htm extension, change the Save as type to All Files, and click Save afterwards.
Next, open the file in your browser (double-clicking the file should do the trick). You should see your signature with the round image. You can select the signature (Ctrl+A) and copy it to the clipboard (Ctrl+C). Then, set it up in your email client as you normally would.
The only problem with editing the border-radius CSS attribute is that not all email clients display those rounded corners. To be more precise, Outlook doesn’t display round crop images.
Outlook doesn’t display round images
I, personally, enjoy using Microsoft Outlook in everyday work. The problem is that Outlook has its own way of understanding and parsing HTML and CSS code. No amount of additional lines of code will let you display round images with the border-radius method. The border-radius CSS attribute is ignored and your picture is displayed as original (square or rectangular). Therefore, you are left with two ways to cope with that:
- Create circular images or rounded-corners pictures with a graphics editor. This way, it should be displayed the same way in every email client, including Outlook. Remember to add transparency to the fragments you cut out and to save the file in the .png format. Why? Because otherwise, your rounded images will look bad in, for example, Outlook’s dark mode, or if you decide to use any other kind of background in your email signatures (or emails in general).
- Use the border-radius method (which works for any image format supported by email clients), knowing that in Outlooks your images will become rectangular.
Read also:
