CSS圈子边框？

Question

我想知道如何在CSS中有一个圆形或点的边框（不是方形点，border: white dotted 2px; < - 我不想要这个）？

Answer 1

编辑：

我会建议使用CSS3 border-image的理解是IE10和下面将需要一个polyfill。

.bordered-box { 
    border-style: solid; 
    border-width: 27px; 
    -moz-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 repeat; 
    -webkit-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 repeat; 
    -o-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 repeat; 
    border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 fill repeat; 
} 

原始接受的答案：

只有这样，才能保证它显示为不同的浏览器界是使用图像。

这里有一个教程：http://www.htmlgoodies.com/beyond/css/how-to-create-border-images-using-css3.html

CSS：

.dots { 
    border-width: 30px; 
    -webkit-border-image:url(images/dots.png) 30 repeat stretch; 
    -moz-border-image:url(images/dots.png) 30 repeat stretch; 
    border-image:url(images/dots.png) 30 repeat stretch; 
    padding: 30px; 
} 

HTML：

<div class="dots"></div> 

图片：

如果你需要它为IE工作，你也可以创建一个包含点背景的包装div，并给内部div一个填充任意点高度的填充。

Answer 2

它不能很好的跨浏览器的支持，但你应该看看在CSS3属性边界图像：

-moz-border-image:url(border.png) 30 30 round; /* Firefox */  
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */  
-o-border-image:url(border.png) 30 30 round; /* Opera */  
border-image:url(border.png) 30 30 round; 

Answer 3

如果CSS3是一个选项，border-image属性是你最好的选择。这里是关于这个主题的教程：http://css-tricks.com/understanding-border-image/