如何用css创建虚线半径边框？

我正在尝试创建一个半径边框，但不是用纯色的样式，而是用虚线的样式。如何用css创建虚线半径边框？

这是demo这是固体风格，但我希望它是破风格。

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; 
}

enter image description here

更新：

它的工作在Chrome和IE太多，但不能在Firefox，而我使用的Firefox版本28.

来源

2014-05-08 Bhojendra Nepal

它已经破灭了，男人。 – mayankcpdixit

检查后伪元素:) –

嗨，它只是破折号。你的意思是点缀风格..请检查链接演示http://jsfiddle.net/smey7/2/ – Renjith

如果你的小盒子不能容纳任何内容，你可以使用另一个伪元素来创建一个掩码。 DEMO

div:before { 
    content: ""; 
    width: 10px; 
    height: 10px; 
    position: absolute; 
    z-index: 3; 
    top: 15px; 
    right: -29px; 
    border-radius:100%; 
    box-shadow:inset 0 0 0 5px white, 0 0 0 5px white;; 
    border:solid transparent 5px; 
}

其实，这将是更好的只会这mozillas浏览器：DEMO

@-moz-document url-prefix() { 
    div:before { 
    content: ""; 
    width: 10px; 
    height: 10px; 
    position: absolute; 
    z-index: 3; 
    top: 15px; 
    right: -29px; 
    border-radius:100%; 
    box-shadow:inset 0 0 0 5px white, 0 0 0 5px white;; 
    border:solid transparent 5px; 
} 
}

来源

2014-05-08 10:25:41

否则，SVG会正常工作。 –