camelCaseD camelCaseD - 23 days ago 7
CSS Question

CSS Circle Border?

I am wondering how to have a border that is circles or dots(not squared dots,

border: white dotted 2px;
<- I don't want this) in CSS?

Answer

EDIT:

I would recommend using CSS3 border-image with the understanding that IE10 and below will need a 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;
}

Original Accepted Answer:

The only way to guarantee that it shows up as circles across all browsers is to use an image.

There is a tutorial here: 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>

Image:

CSS3 image border of dots

If you need it to work for IE, you could also just create a wrapper div that has a background of dots and just give the inner div a padding of whatever height the dots are.