title: how to fade-out/blur div's borders with css?
body: <p>I have read a lot of topic about this problem but nothing has worked so far.
  the easiest method I have read about involves using box-shadow, but this results in the shadow having a different color to the box even though the code of the color is the same (#141414).</p>
  
  <p><strong>Question</strong></p>
  
  <p>How can I get a fade-out/blur border for a div box? It's quite hard to explain in writing so I made this image to give you the idea (ignore the background). If you <strong>look closely</strong> you can see the blending and the color is uniform, fading to transparent.</p>
  
  <p><img src="https://i.stack.imgur.com/SyTnz.png" alt="enter image description here">
  box-shadow as i said, doesn't work for me.
  <div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-image:url('http://phptesting.altervista.org/tessuto.png');
      background-repeat: repeat;
    }
  
  div {
    width: 300px;
    height: 300px;
      background-color: #141414;
      border: 2px solid #141414;
      box-shadow: 0 0 5px 5px #141414;
      border-radius: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;body&gt;
  &lt;div&gt;&lt;/div&gt;
      &lt;/body&gt;
    &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>