409

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.

0

22 Answers 22

596

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>

13
  • 30
    imho it's a hack of n degree. Jun 6, 2015 at 17:12
  • 12
    I want to do the same thing but dotted border width is 3px rather than 1px and now it becomes square rather than dotted. Jun 8, 2015 at 6:10
  • 7
    I've made a SCSS mixin to implement this and change colors and spacing quickly. Check it out at github.com/florbraz/Dotted-Border-w-custom-spacing-SCSS-Mixin.
    – Flor Braz
    Aug 31, 2015 at 21:13
  • 1
    This hack is wrong for one wanting to generate PDFs with tables using such borders. It makes one page table PDF weight 2.5 MB (generated with Chrome 66.0.3359.170), where using regular dashed borders (eg. border:1px dashed black) makes file only 40 kB of size.
    – Marecky
    May 16, 2018 at 12:11
  • 12
    What if I want all 4 edges dashed? Jun 13, 2018 at 13:53
146

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.

2
  • 7
    You may use gradients (pure CSS) for a fully customisable border. See answer below
    – Olivictor
    Mar 29, 2014 at 16:04
  • 3
    -1, @Shadikka, What the CSS3 spec says is that it cannot be done using border: dotted, but it is possible to do it using gradients as Eagorajose's answer has shown.
    – Pacerier
    Sep 18, 2014 at 13:58
143

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.

12
  • 3
    Is this cross-browser compatible?
    – J82
    May 31, 2013 at 21:52
  • 137
    I can't imagine what a pain in the a** that would be to maintain.
    – Kzqai
    Sep 4, 2013 at 22:24
  • 1
    how to get same effect for vertical one?
    – Rinku
    Nov 25, 2013 at 7:47
  • 5
    @Rinku with transform:rotate(90deg); display:block;
    – Jeroen K
    Dec 27, 2013 at 9:20
  • 6
    so ugly, but so clever :) I also notice that I can have finer control over placement if I set height:0; and use padding to control placement. So I wanted the dotted line on the bottom with a little room below so I used padding: 0 0 10px;
    – MatthewLee
    Mar 22, 2014 at 21:44
65

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.

div.two{border:2px dashed #FF0000}

div.five:before {
  content: "";
  position: absolute;
  border: 5px dashed #FF0000;
  top: -3px;
  bottom: -3px;
  left: -3px;
  right: -3px;
}

div.ten:before {
  content: "";
  position: absolute;
  border: 10px dashed #FF0000;
  top: -8px;
  bottom: -8px;
  left: -8px;
  right: -8px;
}

div.odd:before {left:0;right:0;border-radius:60px}

div {
  overflow: hidden;
  position: relative;


  text-align:center;
  padding:10px;
  margin-bottom:20px;
}
<div class="two">Kupo nuts here</div>
<div class="five">Kupo nuts<br/>here</div>
<div class="ten">Kupo<br/>nuts<br/>here</div>
<div class="ten odd">Kupo<br/>nuts<br/>here</div>

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

4
  • 5
    Strong work! This is the only one of these answers that really works without being terrible to maintain, IMO. Even the accepted answer only works for one edge of the div. This works for the whole border. Jun 13, 2018 at 13:52
  • 2
    This is by far the best and most elegant answer. Should be marked as the solution...
    – Beejee
    Nov 7, 2019 at 9:12
  • Thanks for this answer! Is it possible to remove this border conditionally? I'm using styled-components and I'd hoped I could do something like ${({ hovered }) => hovered ? '' : css` overflow: hidden; position: relative; ::before { content: ''; position: absolute; border: 7px dashed ${Colors.primary50}; top: -6px; bottom: -6px; left: -6px; right: -6px; } `} Sep 9, 2020 at 15:10
  • 1
    Nice, but you won't get a consistent result across browsers with this. For instance, it looks different in Firefox than it does in Chrome. Nov 22, 2020 at 9:54
56

Late to the party but I found that neat little tool online.

https://kovart.github.io/dashed-border-generator/

enter image description here

1
  • 4
    This should be at the top. :( Dec 22, 2022 at 2:28
33

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:

#border {
  width: 200px;
  height: 100px;
  background: yellow;
  text-align: center;
  line-height: 100px;

  background: linear-gradient(to right, orange 50%, transparent 0%) top repeat-x, 
    linear-gradient(blue 50%, transparent 0%) right repeat-y,
    linear-gradient(to right, green 50%, transparent 0%) bottom repeat-x,
    linear-gradient(red 50%, transparent 0%) left repeat-y;
  background-size: 10px 1px, 1px 10px;
}
<div id="border">
  bordered area
</div>

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.

1
  • 1
    This trick don't work correctly, when use border-radius. Do you have any idea?
    – Mahdi
    Jan 13, 2021 at 7:39
27

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).

2
  • thanks pekka, that mean i can't use border property ... so i have to use image for it. Jun 6, 2011 at 10:30
  • @kc if none of the border styles is to your liking, yes.
    – Pekka
    Jun 6, 2011 at 10:47
15

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.

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

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.

0
13

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 */

#page {
    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 */
    
    width: 100px;
    height: 100px;
}
<div id="page"></div>

8

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.

0
4

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

/* 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);
}
<div class='dropzone'>
  Drag 'n' drop some files here, or click to select files
</div>

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

3

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.

1
  • 3
    To be fair, I think most people are saying you can't do it to the literal question of adjusting the border dotted styling. They're not saying something similar isn't possible using other CSS properties. In my opinion it makes a lot more sense from a semantic point of view to use a background image or border-image as others have shown, than use pseudo elements and a dozen lines of CSS.
    – Alex
    Mar 3, 2014 at 11:49
1

Short answer: You can't.

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

1

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.

2
  • By doing so content will also gets applied scale(8) Aug 9, 2018 at 7:36
  • border: 1px dashed black; is considered unknown property in chrome browser. Feb 25, 2020 at 10:40
1
<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

1

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

var make_dotted_borders = function() {
    // EDIT THESE SETTINGS:
    
    var spacing = 8;
    var dot_width = 2;
    var dot_height = 2;
    
    //---------------------

    var dotteds = document.getElementsByClassName("dotted");
    for (var i = 0; i < dotteds.length; i++) {
        var width = dotteds[i].clientWidth + 1.5;
        var height = dotteds[i].clientHeight;

        var horizontal_count = Math.floor(width / spacing);
        var h_spacing_percent = 100 / horizontal_count;
        var h_subtraction_percent = ((dot_width / 2) / width) * 100;

        var vertical_count = Math.floor(height / spacing);
        var v_spacing_percent = 100 / vertical_count;
        var v_subtraction_percent = ((dot_height / 2) / height) * 100;

        var dot_container = document.createElement("div");
        dot_container.classList.add("dot_container");
        dot_container.style.display = getComputedStyle(dotteds[i], null).display;

        var clone = dotteds[i].cloneNode(true);

        dotteds[i].parentElement.replaceChild(dot_container, dotteds[i]);
        dot_container.appendChild(clone);

        for (var x = 0; x < horizontal_count; x++) {
            // The Top Dots
            var dot = document.createElement("div");
            dot.classList.add("dot");
            dot.style.width = dot_width + "px";
            dot.style.height = dot_height + "px";

            var left_percent = (h_spacing_percent * x) - h_subtraction_percent;
            dot.style.left = left_percent + "%";
            dot.style.top = (-dot_height / 2) + "px";
            dot_container.appendChild(dot);

            // The Bottom Dots
            var dot = document.createElement("div");
            dot.classList.add("dot");
            dot.style.width = dot_width + "px";
            dot.style.height = dot_height + "px";

            dot.style.left = (h_spacing_percent * x) - h_subtraction_percent + "%";
            dot.style.top = height - (dot_height / 2) + "px";
            dot_container.appendChild(dot);
        }

        for (var y = 1; y < vertical_count; y++) {
            // The Left Dots:
            var dot = document.createElement("div");
            dot.classList.add("dot");
            dot.style.width = dot_width + "px";
            dot.style.height = dot_height + "px";

            dot.style.left = (-dot_width / 2) + "px";
            dot.style.top = (v_spacing_percent * y) - v_subtraction_percent + "%";
            dot_container.appendChild(dot);
        }
        for (var y = 0; y < vertical_count + 1; y++) {
            // The Right Dots:
            var dot = document.createElement("div");
            dot.classList.add("dot");
            dot.style.width = dot_width + "px";
            dot.style.height = dot_height + "px";

            dot.style.left = width - (dot_width / 2) + "px";
            if (y < vertical_count) {
                dot.style.top = (v_spacing_percent * y) - v_subtraction_percent + "%";
            }
            else {
                dot.style.top = height - (dot_height / 2) + "px";
            }

            dot_container.appendChild(dot);
        }
    }
}

make_dotted_borders();
div.dotted {
    display: inline-block;
    padding: 0.5em;
}

div.dot_container {
    position: relative;
    margin-left: 0.25em;
    margin-right: 0.25em;
}

div.dot {
    position: absolute;
    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>');
}
<div class="dotted">Lorem Ipsum</div>

1

This is how I made a dotted border (round dots) with custom spacing in css:

.div-with-bottom-border {
    background-position: bottom;
    background-size: 12px 2px;
    background-repeat: repeat-x;
    background-image: radial-gradient(circle, black 1px, white 1px);
}
0

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.

1
  • That is a very convoluted solution. I can't help but feel that this would also cost a tiny bit more in performance and perceived load times, depending on the weight of the rest of the JS on the page.
    – Emmett R.
    May 24, 2016 at 16:48
0

We needed to have circles and this is how we solved it :)

More or less this is done to the element where the styled "border" is needed:

:before {
      position: absolute;
      width: 100%;
      height: 10px;
      top:0;
      left: 0;
      transform: translateY(-50%);
      content: '';
      background: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 18 10' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='5' cy='5' r='5' fill='%23f7f7f7'/%3e%3c/svg%3e");
    }

Demo: https://codepen.io/arnoldsv/pen/PoWYxbg

0

Here's a solution using CSS only with the use of a clip-path to mask the excess border. Unlike the most voted answer this allows for transparent backgrounds. You can also use get rounded borders by matching the clip-path round property to the border-radius.

.demo {
  display: inline-flex;
  width: 200px;
  height: 100px;
  position: relative;
  clip-path: inset(0 round 30px 0 30px 0);
}

.demo::before {
  content: '';
  position: absolute;
  left: -7px;
  top: -7px;
  right: -7px;
  bottom: -7px;
  border: 8px dashed rgba(0, 0, 255, 0.3);
  border-radius: 37px 0 37px 0;
  box-sizing: border-box;
}
<div class="demo"></div>

Here's a sass mixin for those interested

=dashed-border($size: 5px, $thickness: 1px, $color: black, $round: 0px)
    
    $corners: ''
    
    @for $i from 1 through length($round)
        $value: nth($round, $i)
        @if $value != 0
            $corners: unquote($corners + calc(#{$value} - #{$size}) + ' ')
        @else
            $corners: unquote($corners + #{$value} + ' ')
    
    clip-path: inset(0 round $corners)
    
    &::before
        content: ''
        position: absolute
        left: - $size + $thickness
        top: - $size + $thickness
        right: - $size + $thickness
        bottom: - $size + $thickness
        border: $size dashed $color
        border-radius: $round
        box-sizing: border-box
0

I had a similar issue but with a circle. The provided answers didn't fit my case. I found a website where you can add a background-image that suits your border-radius https://kovart.github.io/dashed-border-generator/

For my case I needed the middle example but in a circle. I copied what was generated and adjusted some values.

  • Dot-color black to white
  • To increase the sizes I change the rx- and ry-values
  • To increase the distance between the dots I changed stroke-dasharray from 8 to 10

That worked for me.

-1

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.

Not the answer you're looking for? Browse other questions tagged or ask your own question.