CODEWITHSUNDEEP
cssbordergeometry
camelCaseD
camelCaseD

Reputation: 2653

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?

Upvotes: 1

Views: 15684

Answers (3)

Justin
Justin

Reputation: 27331

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.

Upvotes: 4

nickcoxdotme
nickcoxdotme

Reputation: 6707

If CSS3 is an option, the border-image property is your best bet. Here is a tutorial on this very topic: http://css-tricks.com/understanding-border-image/

Upvotes: 0

Nathan
Nathan

Reputation: 25016

It's not well supported across browsers, but you should have a look at the css3 attribute border-image:

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

Upvotes: 2

Related Questions