camelCaseD camelCaseD - 5 months ago 62
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?



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( 27 repeat;
    -webkit-border-image: url( 27 repeat;
    -o-border-image: url( 27 repeat;
    border-image: url( 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:


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


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


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.