CSS3 Rounded and Dotted borders?

user_299891 0
Viewed 34949

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

css
7 Answers

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

Blockquote: Using this will work

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

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>

user_81435090
Related