title: How to create dashed radius border just with css?
body: <p>I'm trying to create a radius border but not with solid style but with dashed style.</p>
  
  <p>Here's the <a href="http://jsfiddle.net/smey7/" rel="nofollow noreferrer">demo</a> which is in solid style, but I want it to be dashed style.</p>
  
  <pre><code>div{
      width: 200px;
      height: 200px;
      border: 2px dashed;
      position: relative;
  }
  div:after{
      content: "";
      width: 25px;
      height: 25px;
      position: absolute;
      z-index: 2;
      top: 15px;
      right: -29px;
      border-top: 2px dashed;
      border-left: 2px solid #fff;
      border-right: 2px dashed;
      border-bottom: 2px dashed;
      border-radius: 0 25px 0 0;
  }
  </code></pre>
  
  <hr>
  
  <p><img src="https://i.stack.imgur.com/DiuZo.jpg" alt="enter image description here"></p>
  
  <hr>
  
  <p><strong>Update:</strong></p>
  
  <p>It's working in chrome and ie too but not in firefox, and I'm using firefox version 28.</p>