CSS3 Rounded and Dotted borders?

Question

Is it possible to create a border in CSS3 such that they are rounded and dotted?

I\'m rounding my corners but they appear solid with:

border: 1px dot         


        

Answer 1

One solution is to use multiple background images. You can use this approach to specify a different background-image for the four corners.

You may also want to add a fifth image for the centre background image (repeated, if necessary).

Something along the lines of...

.dashed-rounded-border {

    border: 2px dashed blue;

    background-image: url("top-left.png"), url("top-right.png"), url("bottom-right.png"), url("bottom-left.png"), url("center.png");
    background-position: left top, right top, right bottom, left bottom, center center;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x;

    -webkit-border-radius: 22px;
    -moz-border-radius: 22px;
    border-radius: 22px;

}