Css3 Rounded and Dotted Borders

CSS3 Rounded and Dotted borders?

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

Rounded dotted border spacing in css

This is the closest that I could achieve. It uses multiple box-shadows of a single pseudo-element offset to the required positions.

This can easily be converted to a dotted border also by adding the below line to the pseudo-element.

border-radius: 50%;

Box Shadow is supported in IE9+ also.

Note: This approach would work if you have a fixed height and width. Not the ideal approach but I think this is the most you could achieve using CSS having IE9+ support.

.bord {    height: 185px;    width: 250px;    background: gray;    border-radius: 20px;    position: relative;    padding: 25px;}.bord:before {    position: absolute;    top: 20px;    left: 20px;    content:'';    background: black;    height: 5px;    width: 5px;    box-shadow: 50px 0px 0px black, 100px 0px 0px black, 150px 0px 0px black, 200px 0px 0px black, 250px 0px 0px black, 0px 190px 0px black, 50px 190px 0px black, 100px 190px 0px black, 150px 190px 0px black, 200px 190px 0px black, 250px 190px 0px black, 0px 47.5px 0px black, 0px 95px 0px black, 0px 142.5px 0px black, 0px 47.5px 0px black, 250px 47.5px 0px black, 250px 95px 0px black, 250px 142.5px 0px black;}

<div class="wrapper">    <div class="bord">abcd</div></div>

Rounded dotted border with gradient

You can set a white dotted border on top of a gradient image covering only the border zone. It looks like your request

.test {  width: 300px;  height: 80px;  margin: 10px;  border: dotted 10px white;  border-radius: 50px;  background-image: linear-gradient(white, white), linear-gradient(blue, magenta);  background-origin: border-box;  background-clip: content-box, border-box;}

<div class="test"></div>

CSS border radius for dotted border

The solid corners are a limitation of Firefox (and other Gecko-based browsers). MDN says:

Dotted and dashed rounded border corners are rendered as solid in Gecko; see bug 382721.

How to increase space between dotted border dots

This trick works for both horizontal and vertical borders:

/*Horizontal*/
background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 3px 1px;
background-repeat: repeat-x;

/*Vertical*/
background-image: linear-gradient(black 33%, rgba(255,255,255,0) 0%);
background-position: right;
background-size: 1px 3px;
background-repeat: repeat-y;

You can adjust the size with background-size and the proportion with the linear-gradient percentages. In this example I have a dotted line of 1px dots and 2px spacing.
This way you can have multiple dotted borders too using multiple backgrounds.

Try it in this JSFiddle or take a look at the code snippet example:

div {  padding: 10px 50px;}.dotted {  border-top: 1px #333 dotted;}.dotted-gradient {  background-image: linear-gradient(to right, #333 40%, rgba(255, 255, 255, 0) 20%);  background-position: top;  background-size: 3px 1px;  background-repeat: repeat-x;}.dotted-spaced {  background-image: linear-gradient(to right, #333 10%, rgba(255, 255, 255, 0) 0%);  background-position: top;  background-size: 10px 1px;  background-repeat: repeat-x;}.left {  float: left;  padding: 40px 10px;  background-color: #F0F0DA;}.left.dotted {  border-left: 1px #333 dotted;  border-top: none;}.left.dotted-gradient {  background-image: linear-gradient(to bottom, #333 40%, rgba(255, 255, 255, 0) 20%);  background-position: left;  background-size: 1px 3px;  background-repeat: repeat-y;}.left.dotted-spaced {  background-image: linear-gradient(to bottom, #333 10%, rgba(255, 255, 255, 0) 0%);  background-position: left;  background-size: 1px 10px;  background-repeat: repeat-y;}

<div>no  <br>border</div><div class='dotted'>dotted  <br>border</div><div class='dotted-gradient'>dotted  <br>with gradient</div><div class='dotted-spaced'>dotted  <br>spaced</div>
<div class='left'>no  <br>border</div><div class='dotted left'>dotted  <br>border</div><div class='dotted-gradient left'>dotted  <br>with gradient</div><div class='dotted-spaced left'>dotted  <br>spaced</div>

---

Related Topics