Border Radius not working in Outlook Email template

Hi techies,

We can have the different ways to search it on google or stack overflow that border radius not working in outlook CSS, how to make image as round or roundrect, oval, circle in outlook, how to put border radius to image in outlook email template,  etc.

I assure you that at the end of this tech blog you can able to find all the answers related to the Outlook email template and its CSS behavior.

Lets get started...


Just a little brief that why the border radius is not working in the outlook email template

Outlook still support the Vector markup language (VML) when it comes to support the email template CSS which doesn't support most of the CSS3 or HTML5 features that most of the web browsers do. As Border-radius is a feature of CSS3 so its not is not supported by Microsoft outlook.

It means to meet your requirement you have to take reference from VML. Actually, I made it easier for you. Below is the code snippet that will work to solve the problem.

Code Snippet to make round image in outlook email template-


<td valign="top" height="205" width="310">
  <!--[if gte mso 9]>
   <v:roundrect                     
xmlns:v="urn:schemas-microsoft-com:vml"   
xmlns:w="urn:schemas-microsoft-com:office:word"       
  arcsize="5%"  
  strokeweight="0pt"                            
  style="v-text-anchor:middle;height:205px;width:310px;" 
  strokecolor="white"
  border="0"
  >
  <v:fill type="frame"      
    style="height:205px;width:310px;border:0;"
    border="0"
    src=abc.jpg />                          
    </v:roundrect>
  <![endif]-->
  <div style="mso-hide:all">
    <a href="#">
      <img align="center" border="0" src="abc.jpg" class="table-column-image"
        style="border-radius: 6px; max-width: 205px;  display: block; width: 100%;" 
        height="120" width="200" />
    </a>
  </div>
</td>

The Above HTML will give the below result

                                    

If you want more round from the corner change the arcsize attribute accordingly.

If you need some other shape refer use predefined shape  &  fill element link.


Hope you get your answer... Thanks for visiting :) #happylearning

Comments

Post a Comment

Popular posts from this blog

C# .Net Core Interview Questions for Freshers and Experienced Developers

  C#, .NetFramework, .Net Core interview Questions For Angular and SQL Interview Questions, click here...! 1. IOC (Inversion of Control) Container in .NET Core The IOC container in .NET Core is responsible for managing object creation and their dependencies. It's used for Dependency Injection (DI), making it easy to manage lifecycles (transient, scoped, singleton). Example of registering a service: public void ConfigureServices(IServiceCollection services) {     services.AddScoped<IMyService, MyService>();  // DI registration } 2. Configure and ConfigureServices - When to Use What ConfigureServices: Used to register services with the dependency injection container. Typically includes services like database context, authentication, and MVC. Configure: Used to define the middleware pipeline (how requests are processed). Example: public void ConfigureServices(IServiceCollection services) {     services.AddControllers();     services.AddDbContex...
Read more

15 ways to keep your team motivated while working remotely ?

Image
Remote teams is a new trend after the Coronavirus pandemic and it changed how the world sees the Work from Home option. Its not only safe but also a cost effective measure which most of the companies are taking. Thus, many companies like salesforce and twitter has already made it as a company policy and option to go office for work. Handling a team is not everyone's cup of tea. It is even more tougher while a team is working remotely. So, here are few ways that make it easy for you to connect with your team efficiently and help you to have a engaged and motivated team.  15 ways to motivate your team while working remotely -  1. Practice Emotional Intelligence 2. Empathize with people 3. Remember the old time which you spent in office and rejoice those moments. 4. Talk about things other than office work. 5. Appreciate people and show gratitude. 6. Help them to solve their problems. 7. Motivate them to do things which they like other than office work 8. Be with them if they nee...
Read more