CSS3 Rounded and Dotted borders?

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 dotted gray;
-moz-border-radius-topright: 30px 20px;
-moz-border-radius-topleft: 30px 20px;

The rest of the border is dotted but the corners开发者_开发问答 are solid.

I understand that this is specific to Firefox but that's fine for now.

Thanks

It'a bug in firefox.see this issue,mozilla doesn't support rounded corner for dotted and dashed border.

I managed to find a solution by accident.

Here's the code:

background-color: none !important;
  border:none !important;
  border-top: 5px dotted #70c1bb !important;
    border-top-width:5px;
    border-right-width:0px;
    border-bottom-width:0px;
    border-left-width:0px;

Yes, theoretically you can have dotted and rounded borders, but as you have seen practically browsers may not support it yet.

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;

}

My solution for this issue is

background: url('../images/dot.png');
background-size: 4px;
background-position: bottom left;
background-repeat: repeat-x;

make sure the dot image is just one dot with some white space on wither side of it. After that you should be good.

Blockquote: Using this will work

border-style: none;
border-top-style: dotted;
border-width: thick;

These two lines of code will make your border rounded or dotted.

• border: 4px; we are setting the size of the border to make it more visible ( It is up to you)
• border-style:dotted none none none; we are setting border-top-style: dotted; and others to none

hr{
border: 4px;
border-style:dotted none none none;
/* border-style:none;
  border-top-style: dotted; */
width:100px;
}
  

<hr>