[html] How to increase space between dotted border dots

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.

This question is related to html css border

The answer is


This is a really old question but it has a high ranking in Google so I'm going to throw in my method which could work depending on your needs.

In my case, I wanted a thick dashed border that had a minimal break in between dashes. I used a CSS pattern generator (like this one: http://www.patternify.com/) to create a 10px wide by 1px tall pattern. 9px of that is solid dash color, 1px is white.

In my CSS, I included that pattern as the background image, and then scaled it up by using the background-size attribute. I ended up with a 20px by 2px repeated dash, 18px of that being solid line and 2px white. You could scale it up even more for a really thick dashed line.

The nice thing is since the image is encoded as data you don't have the additional outside HTTP request, so there's no performance burden. I stored my image as a SASS variable so I could reuse it in my site.


You could create a canvas (via javascript) and draw a dotted line within. Within the canvas you can control how long the dash and the space in between shall be.


So many people are say "You can't". Yes you can. It's true that there is not a css rule to control the gutter space between the dashes but css has other abilities. Don't be so quick to say that a thing can not be done.

.hr {
    border-top: 5px dashed #CFCBCC;
    margin: 30px 0;
    position: relative;
}

.hr:before {
    background-color: #FFFFFF;
    content: "";
    height: 10px;
    position: absolute;
    top: -2px;
    width: 100%;
}

.hr:after {
    background-color: #FFFFFF;
    content: "";
    height: 10px;
    position: absolute;
    top: -13px;
    width: 100%;
}

Basically the border-top height (5px in this case) is the rule that determines the gutter "width". OIf course you would need to adjust the colors to match your needs. This also is a small example for a horizontal line, use left and right to make the vertical line.


In my case I needed curved corners and thin border so I came up with this solution:

_x000D_
_x000D_
/* For showing dependencies between attributes */
 :root {
  --border-width: 1px;
  --border-radius: 4px;
  --bg-color: #fff;
}


/* Required: */
.dropzone {
  position: relative;
  border: var(--border-width) solid transparent;
  border-radius: var(--border-radius);
  background-clip: padding-box;
  background-color: var(--bg-color);
}
.dropzone::before {
  content: '';
  position: absolute;
  top: calc(var(--border-width) * -1); /* or without variables: 'top: -1px;' */
  right: calc(var(--border-width) * -1);
  bottom: calc(var(--border-width) * -1);
  left: calc(var(--border-width) * -1);
  z-index: -1;
  background-image: repeating-linear-gradient(135deg, transparent 0 8px, var(--bg-color) 8px 16px);
  border-radius: var(--border-radius);
  background-color: rgba(0, 0, 0, 0.38);
}


/* Optional: */
html {
  background-color: #fafafb;
  display: flex;
  justify-content: center;
}
.dropzone {
  box-sizing: border-box;
  height: 168px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.dropzone::before {
  transition: background-color 0.2s ease-in-out;
}
.dropzone:hover::before {
  background-color: rgba(0, 0, 0, 0.87);
}
_x000D_
<div class='dropzone'>
  Drag 'n' drop some files here, or click to select files
</div>
_x000D_
_x000D_
_x000D_

The idea is to put svg pattern behind element and display only thin line of this pattern as element border.


You cannot do it with pure CSS - the CSS3 spec even has a specific quote about this:

Note: There is no control over the spacing of the dots and dashes, nor over the length of the dashes. Implementations are encouraged to choose a spacing that makes the corners symmetrical.

You can, however, use either a border-image or a background image that does the trick.


Building 4 edges solution basing on @Eagorajose's answer with shorthand syntax:

background: linear-gradient(to right, #000 33%, #fff 0%) top/10px 1px repeat-x, /* top */
linear-gradient(#000 33%, #fff 0%) right/1px 10px repeat-y, /* right */
linear-gradient(to right, #000 33%, #fff 0%) bottom/10px 1px repeat-x, /* bottom */
linear-gradient(#000 33%, #fff 0%) left/1px 10px repeat-y; /* left */

_x000D_
_x000D_
#page {_x000D_
    background: linear-gradient(to right, #000 33%, #fff 0%) top/10px 1px repeat-x, /* top */_x000D_
    linear-gradient(#000 33%, #fff 0%) right/1px 10px repeat-y, /* right */_x000D_
    linear-gradient(to right, #000 33%, #fff 0%) bottom/10px 1px repeat-x, /* bottom */_x000D_
    linear-gradient(#000 33%, #fff 0%) left/1px 10px repeat-y; /* left */_x000D_
    _x000D_
    width: 100px;_x000D_
    height: 100px;_x000D_
}
_x000D_
<div id="page"></div>
_x000D_
_x000D_
_x000D_


I made a javascript function to create dots with an svg. You can adjust dot spacing and size in the javascript code.

_x000D_
_x000D_
var make_dotted_borders = function() {_x000D_
    // EDIT THESE SETTINGS:_x000D_
    _x000D_
    var spacing = 8;_x000D_
    var dot_width = 2;_x000D_
    var dot_height = 2;_x000D_
    _x000D_
    //---------------------_x000D_
_x000D_
    var dotteds = document.getElementsByClassName("dotted");_x000D_
    for (var i = 0; i < dotteds.length; i++) {_x000D_
        var width = dotteds[i].clientWidth + 1.5;_x000D_
        var height = dotteds[i].clientHeight;_x000D_
_x000D_
        var horizontal_count = Math.floor(width / spacing);_x000D_
        var h_spacing_percent = 100 / horizontal_count;_x000D_
        var h_subtraction_percent = ((dot_width / 2) / width) * 100;_x000D_
_x000D_
        var vertical_count = Math.floor(height / spacing);_x000D_
        var v_spacing_percent = 100 / vertical_count;_x000D_
        var v_subtraction_percent = ((dot_height / 2) / height) * 100;_x000D_
_x000D_
        var dot_container = document.createElement("div");_x000D_
        dot_container.classList.add("dot_container");_x000D_
        dot_container.style.display = getComputedStyle(dotteds[i], null).display;_x000D_
_x000D_
        var clone = dotteds[i].cloneNode(true);_x000D_
_x000D_
        dotteds[i].parentElement.replaceChild(dot_container, dotteds[i]);_x000D_
        dot_container.appendChild(clone);_x000D_
_x000D_
        for (var x = 0; x < horizontal_count; x++) {_x000D_
            // The Top Dots_x000D_
            var dot = document.createElement("div");_x000D_
            dot.classList.add("dot");_x000D_
            dot.style.width = dot_width + "px";_x000D_
            dot.style.height = dot_height + "px";_x000D_
_x000D_
            var left_percent = (h_spacing_percent * x) - h_subtraction_percent;_x000D_
            dot.style.left = left_percent + "%";_x000D_
            dot.style.top = (-dot_height / 2) + "px";_x000D_
            dot_container.appendChild(dot);_x000D_
_x000D_
            // The Bottom Dots_x000D_
            var dot = document.createElement("div");_x000D_
            dot.classList.add("dot");_x000D_
            dot.style.width = dot_width + "px";_x000D_
            dot.style.height = dot_height + "px";_x000D_
_x000D_
            dot.style.left = (h_spacing_percent * x) - h_subtraction_percent + "%";_x000D_
            dot.style.top = height - (dot_height / 2) + "px";_x000D_
            dot_container.appendChild(dot);_x000D_
        }_x000D_
_x000D_
        for (var y = 1; y < vertical_count; y++) {_x000D_
            // The Left Dots:_x000D_
            var dot = document.createElement("div");_x000D_
            dot.classList.add("dot");_x000D_
            dot.style.width = dot_width + "px";_x000D_
            dot.style.height = dot_height + "px";_x000D_
_x000D_
            dot.style.left = (-dot_width / 2) + "px";_x000D_
            dot.style.top = (v_spacing_percent * y) - v_subtraction_percent + "%";_x000D_
            dot_container.appendChild(dot);_x000D_
        }_x000D_
        for (var y = 0; y < vertical_count + 1; y++) {_x000D_
            // The Right Dots:_x000D_
            var dot = document.createElement("div");_x000D_
            dot.classList.add("dot");_x000D_
            dot.style.width = dot_width + "px";_x000D_
            dot.style.height = dot_height + "px";_x000D_
_x000D_
            dot.style.left = width - (dot_width / 2) + "px";_x000D_
            if (y < vertical_count) {_x000D_
                dot.style.top = (v_spacing_percent * y) - v_subtraction_percent + "%";_x000D_
            }_x000D_
            else {_x000D_
                dot.style.top = height - (dot_height / 2) + "px";_x000D_
            }_x000D_
_x000D_
            dot_container.appendChild(dot);_x000D_
        }_x000D_
    }_x000D_
}_x000D_
_x000D_
make_dotted_borders();
_x000D_
div.dotted {_x000D_
    display: inline-block;_x000D_
    padding: 0.5em;_x000D_
}_x000D_
_x000D_
div.dot_container {_x000D_
    position: relative;_x000D_
    margin-left: 0.25em;_x000D_
    margin-right: 0.25em;_x000D_
}_x000D_
_x000D_
div.dot {_x000D_
    position: absolute;_x000D_
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><circle cx="50" cy="50" r="50" fill="black" /></svg>');_x000D_
}
_x000D_
<div class="dotted">Lorem Ipsum</div>
_x000D_
_x000D_
_x000D_


Short answer: You can't.

You will have to use border-image property and a few images.


This uses the standard CSS border and a pseudo element+overflow:hidden. In the example you get three different 2px dashed borders: normal, spaced like a 5px, spaced like a 10px. Is actually 10px with only 10-8=2px visible.

_x000D_
_x000D_
div.two{border:2px dashed #FF0000}_x000D_
_x000D_
div.five:before {_x000D_
  content: "";_x000D_
  position: absolute;_x000D_
  border: 5px dashed #FF0000;_x000D_
  top: -3px;_x000D_
  bottom: -3px;_x000D_
  left: -3px;_x000D_
  right: -3px;_x000D_
}_x000D_
_x000D_
div.ten:before {_x000D_
  content: "";_x000D_
  position: absolute;_x000D_
  border: 10px dashed #FF0000;_x000D_
  top: -8px;_x000D_
  bottom: -8px;_x000D_
  left: -8px;_x000D_
  right: -8px;_x000D_
}_x000D_
_x000D_
div.odd:before {left:0;right:0;border-radius:60px}_x000D_
_x000D_
div {_x000D_
  overflow: hidden;_x000D_
  position: relative;_x000D_
_x000D_
_x000D_
  text-align:center;_x000D_
  padding:10px;_x000D_
  margin-bottom:20px;_x000D_
}
_x000D_
<div class="two">Kupo nuts here</div>_x000D_
<div class="five">Kupo nuts<br/>here</div>_x000D_
<div class="ten">Kupo<br/>nuts<br/>here</div>_x000D_
<div class="ten odd">Kupo<br/>nuts<br/>here</div>
_x000D_
_x000D_
_x000D_

Applied to small elements with big rounded corners may make for some fun effects.


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.


<div style="width: 100%; height: 100vh; max-height: 20px; max-width: 100%; background: url('https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/themes/853636/settings_images/Ei2yf3t7TvyRpFaLQZiX_dot.jpg') #000; background-repeat: repeat;">&nbsp;</div>

this is what I did - use an image enter image description here


This is an old, but still very relevant topic. The current top answer works well, but only for very small dots. As Bhojendra Rauniyar already pointed out in the comments, for larger (>2px) dots, the dots appear square, not round. I found this page searching for spaced dots, not spaced squares (or even dashes, as some answers here use).

Building on this, I used radial-gradient. Also, using the answer from Ukuser32, the dot-properties can easily be repeated for all four borders. Only the corners are not perfect.

_x000D_
_x000D_
div {_x000D_
    padding: 1em;_x000D_
    background-image:_x000D_
        radial-gradient(circle at 2.5px, #000 1.25px, rgba(255,255,255,0) 2.5px),_x000D_
        radial-gradient(circle, #000 1.25px, rgba(255,255,255,0) 2.5px),_x000D_
        radial-gradient(circle at 2.5px, #000 1.25px, rgba(255,255,255,0) 2.5px),_x000D_
        radial-gradient(circle, #000 1.25px, rgba(255,255,255,0) 2.5px);_x000D_
    background-position: top, right, bottom, left;_x000D_
    background-size: 15px 5px, 5px 15px;_x000D_
    background-repeat: repeat-x, repeat-y;_x000D_
}
_x000D_
<div>Some content with round, spaced dots as border</div>
_x000D_
_x000D_
_x000D_

The radial-gradient expects:

  • the shape and optional position
  • two or more stops: a color and radius

Here, I wanted a 5 pixel diameter (2.5px radius) dot, with 2 times the diameter (10px) between the dots, adding up to 15px. The background-size should match these.

The two stops are defined such that the dot is nice and smooth: solid black for half the radius and than a gradient to the full radius.


See the MDN docs for the available values for border-style:

  • none : No border, sets width to 0. This is the default value.
  • hidden : Same as 'none', except in terms of border conflict resolution for table elements.
  • dashed : Series of short dashes or line segments.
  • dotted : Series of dots.
  • double : Two straight lines that add up to the pixel amount defined as border-width.
  • groove : Carved effect.
  • inset : Makes the box appear embedded.
  • outset : Opposite of 'inset'. Makes the box appear 3D (embossed).
  • ridge : Opposite of 'groove'. The border appears 3D (coming out).
  • solid : Single, straight, solid line.

Apart from those choices, there is no way to influence the standard border's style.

If the possibilities there are not to your liking, you could use CSS3's border-image but note that browser support for this is still very spotty (EDIT: browser support is good as of 2020).


IF you're only targeting modern browsers, AND you can have your border on a separate element from your content, then you can use the CSS scale transform to get a larger dot or dash:

border: 1px dashed black;
border-radius: 10px;
-webkit-transform: scale(8);
transform: scale(8);

It takes a lot of positional tweaking to get it to line up, but it works. By changing the thickness of the border, the starting size and the scale factor, you can get to just about thickness-length ratio you want. Only thing you can't touch is dash-to-gap ratio.


AFAIK there isn't a way to do this. You could use a dashed border or perhaps increase the width of the border a bit, but just getting more spaced out dots is impossible with CSS.


So starting with the answer given and applying the fact that CSS3 allows multiple settings - the below code is useful for creating a complete box:

_x000D_
_x000D_
#border {_x000D_
  width: 200px;_x000D_
  height: 100px;_x000D_
  background: yellow;_x000D_
  text-align: center;_x000D_
  line-height: 100px;_x000D_
  background: linear-gradient(to right, orange 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(blue 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(to right, green 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(red 50%, rgba(255, 255, 255, 0) 0%);_x000D_
  background-position: top, right, bottom, left;_x000D_
  background-repeat: repeat-x, repeat-y;_x000D_
  background-size: 10px 1px, 1px 10px;_x000D_
}
_x000D_
<div id="border">_x000D_
  bordered area_x000D_
</div>
_x000D_
_x000D_
_x000D_

Its worth noting that the 10px in the background size gives the area that the dash and gap will cover. The 50% of the background tag is how wide the dash actually is. It is therefore possible to have different length dashes on each border side.


Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to border

How to create a inner border for a box in html? Android LinearLayout : Add border with shadow around a LinearLayout Giving a border to an HTML table row, <tr> In bootstrap how to add borders to rows without adding up? Double border with different color How to make a transparent border using CSS? How to add a border just on the top side of a UIView Remove all stylings (border, glow) from textarea How can I set a css border on one side only? Change input text border color without changing its height