Question regarding CSS in Outlook mail temp-CodePudding

I am working on a mail template for an inventory confirmation email and the mail I have to do contains something that I am struggling to find resources on so any resource about it if you know is helpful. I am trying to make a responsive mail template that also looks good on outlook/microsoft mail and making circle for item colour presents the most trouble to me.

CodePudding user response：

You can use the <style> tag in email to create something like this. Inline styles are also supported.

.circle{
    height: 16px;
    width: 16px;
    border-radius: 50%;
    outline: 2px solid;
    outline-offset: 2px;
    background-color: #f589d9;
}

<div ></div>

CodePudding user response：

Here’s an example on how to do this with HTML, CSS, and a dedicated VML fallback for The Outlooks on Windows.

<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Question regarding CSS in Outlook mail temp</title>
  <!-- https://stackoverflow.com/questions/70364018/question-regarding-css-in-outlook-mail-temp?noredirect=1#comment124384406_70364018 -->
    <!--[if mso]>
    <xml>
    <o:OfficeDocumentSettings>
        <o:PixelsPerInch>96</o:PixelsPerInch>
    </o:OfficeDocumentSettings>
    </xml>
</head>
<body>
  <!--[if !mso]><!-->
  <div style="width:24px;" role="img" aria-label="Pink color">
    <div style="border:4px solid #000; border-radius:50%;">
      <div style="padding:2px;">
        <div style="width:12px; height:12px;background-color:#f587d8; border-radius:50%;"></div>
      </div>
    </div>
  </div>
  <!--<![endif]-->
    <!--[if mso]>
  <v:group style="position:relative; width:24px; height:24px;" coordsize="24,24">
      <v:oval style="position:absolute; left:0; top:0; width:24px; height:24px; z-index:1;" stroked="false" fillcolor="#000000"></v:oval>
      <v:oval style="position:absolute; left:4px; top:4px; width:16px; height:16px; z-index:2;" stroked="false" fillcolor="#ffffff"></v:oval>
      <v:oval style="position:absolute; left:6px; top:6px; width:12px; height:12px; z-index:3;" stroked="false" fillcolor="#f587d8"></v:oval>
  </v:group>
    <![endif]-->
</body>
</html>

Here are test results of rendering on Email on Acid.