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

User · Accepted Answer

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:

_x000D_

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

_x000D_

<div>no_x000D_
  <br>border</div>_x000D_
<div class='dotted'>dotted_x000D_
  <br>border</div>_x000D_
<div class='dotted-gradient'>dotted_x000D_
  <br>with gradient</div>_x000D_
<div class='dotted-spaced'>dotted_x000D_
  <br>spaced</div>_x000D_
_x000D_
<div class='left'>no_x000D_
  <br>border</div>_x000D_
<div class='dotted left'>dotted_x000D_
  <br>border</div>_x000D_
<div class='dotted-gradient left'>dotted_x000D_
  <br>with gradient</div>_x000D_
<div class='dotted-spaced left'>dotted_x000D_
  <br>spaced</div>

_x000D_

User · Answer

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

User · Answer

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

User · Answer

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   lt div id  page  gt  lt  div gt  x000D   x000D   x000D

User · Answer

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   lt div class  dropzone  gt    Drag  n  drop some files here  or click to select files  lt  div gt  x000D   x000D   x000D   The idea is to put svg pattern behind element and display only thin line of this pattern as element border

User · Answer

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   lt div id  border  gt  x000D    bordered area x000D   lt  div gt  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

User · Answer

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

User · Answer

lt 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   gt  amp nbsp  lt  div gt    this is what I did - use an image enter image description here

User · Answer

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   lt div gt Some content with round  spaced dots as border lt  div gt  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

User · Answer

Short answer  You can t   You will have to use border-image property and a few images

User · Answer

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   lt div class  two  gt Kupo nuts here lt  div gt  x000D   lt div class  five  gt Kupo nuts lt br  gt here lt  div gt  x000D   lt div class  ten  gt Kupo lt br  gt nuts lt br  gt here lt  div gt  x000D   lt div class  ten odd  gt Kupo lt br  gt nuts lt br  gt here lt  div gt  x000D   x000D   x000D    Applied to small elements with big rounded corners may make for some fun effects

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Here s a trick I ve used on a recent project to achieve nearly anything I want with horizontal borders  I use  lt hr  gt  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

User · Answer

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  lt  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  lt  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  lt  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  lt  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  lt  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  lt svg xmlns  http   www w3 org 2000 svg  height  100  width  100  gt  lt circle cx  50  cy  50  r  50  fill  black    gt  lt  svg gt     x000D    x000D   lt div class  dotted  gt Lorem Ipsum lt  div gt  x000D   x000D   x000D

User · Answer

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

[html] How to increase space between dotted border dots

Examples related to html

Examples related to css

Examples related to border