title: Is there an easy way to style a svg path element like a div with 3d border?
body: <p>I need a 3d border on my svg shapes. My svgs are created at runtime (in javascript) and do have flexible width/height (should not matter). 
  And of course they have more complex shapes than the given example below. It's just the simplest example I can think of to show you what I am trying to achieve.</p>
  
  <pre><code>&lt;div class="sample"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.sample {
    width:300px;
    height:150px;
    background-color: red;
    border-radius:20px;
    border: solid 15px green;
    border-top-color: blue;
    border-left-color: blue;
  }
  </code></pre>
  
  <p>Didn't want to post a picture here and there is no usable svg code so here is the fiddle to show what it should look like: <a href="https://jsfiddle.net/w2kg3spt/" rel="nofollow noreferrer">css example</a></p>
  
  <p>All my shapes are containing vertical and horizontal lines only (+ border radius)</p>