The CSS property border doesn’t let us increase the width of the dots or the spacing between them, and this clever little trick is a workaround for that.
1
2
3
4
5
6
7
8
9
10
11
/*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;
To increase the width of the dots or the spacing between them, adjust the first percentage in background-image and the first px number in background-size;
Example:
1
2
3
4
background-image: linear-gradient(to right, black 50%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 10px 1px;
background-repeat: repeat-x;
This will have dots of 5px with 5px of space between them.