20

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

jmcmahon
  • 630
  • 1
  • 7
  • 14

7 Answers7

29

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

Srinivas Reddy Thatiparthy
  • 10,985
  • 4
  • 45
  • 68
  • 10
    Five years later and this bug is still there.. :/ – dschu Jun 23 '15 at 09:44
  • 2
    This will be (finally) fixed [in the next release](https://developer.mozilla.org/en-US/Firefox/Releases/50#CSS) of Firefox coming in november: "Border-radiused corners with dashed and dotted styles are now rendered with the specified style instead of a solid style" – vard Oct 07 '16 at 08:47
3

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;
Pbalazs89
  • 170
  • 12
0

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;

}
ban-geoengineering
  • 18,324
  • 27
  • 171
  • 253
0

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

RoToRa
  • 37,635
  • 12
  • 69
  • 105
0

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.

enter image description here

Brady Edgar
  • 486
  • 7
  • 27
0

Blockquote: Using this will work

border-style: none;
border-top-style: dotted;
border-width: thick;
Prachi Parashar
  • 1
0

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>
Ashish Patel
  • 21
  • 1
  • 6