How to increase space between dotted border dots

Question

I am using dotted style border in my box like

.box {     width: 300px;     height: 200px;     border: dotted 1px #f00;     float: left; } 

I want to the increase the space between each dot of the border.

Answer 1

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>

Answer 2

Here's a trick I've used on a recent project to achieve nearly anything I want with horizontal borders. I use <hr/> each time I need an horizontal border. The basic way to add a border to this hr is something like

 hr {border-bottom: 1px dotted #000;} 

But if you want to take control of the border and, for example increase, the space between dots, you may try something like this:

hr { height:14px; /* specify a height for this hr */ overflow:hidden; } 

And in the following, you create your border (here's an example with dots)

hr:after { content:"......................................................................."; letter-spacing: 4px; /* Use letter-spacing to increase space between dots*/ } 

This also means that you can add text-shadow to the dots, gradients etc. Anything you want...

Well, it works really great for horizontal borders. If you need vertical ones, you may specify a class for another hr and use the CSS3 rotation property.