how to give box-shadow in mail

Question

I want to create my own mail by html code.

Now I have written the following code

<table style="margin:auto;box-shadow:0 0 11px #090909">
</table>

The properties are working properly but the effect of boxshadow is not working in gmail and yahoo but it works properly in other company domain

Answer 1

Thats how we did this when no CSS3 was around:

  <div class="shadow" style="width:150px">
    <div class="overlay">
      <p>BoxShadows 90s style.</p>
    </div>
  </div>

and the CSS:

.overlay {
  background-color: #FFFFFF;
  border: 1px solid #000000;
  color: #000000;
  padding: 0.5em;
}
.shadow {
  background-color: #CCCCCC;
}
.shadow .overlay {
  bottom: 4px;
  position: relative;
  right: 4px;
}

Works by underlaying the content with a slightly displaced gray div.

Look here for the not so fancy result. Example

Another way would be to wrap your table in a table where the outer cells have 2 stretched half transparent pngs and 1 corner png as background. Looks far better, but since most email clients don't show images by default, I would stick to the good old browser safe suggestion with an overlay div.

Answer 2

It is only supported in a few email clients. You are better off using images if you want 100% support.