svg rounded corner and shadow

shadow (like css shadow-box)

At least with Firefox you can use a filter, like the following:

.shadow{filter: drop-shadow(8px 6px 6px gray);}

rounded corner

The simplest way to round the corners of a box is to

  • use rect element with rx and ry attributes (such as rx="20" ry="20")
  • and define the style of rect with stroke-linejoin:round; and something like stroke:[your color]; stroke-width:[the width you like];

You can see the following example

box rounded