How to Increase the Space Between the Dots of Dotted Borders

Have you ever needed to increase the space between the dots of dotted borders? If so, read this snippet to find out the solution to this problem.

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Solution with HTML and CSS

In this snippet, we’ll demonstrate how to add space between the dots. To overcome this difficulty, adjust the size with the background-size property and the proportion with the background-image property. So, you can have several dotted borders using multiple backgrounds.

Let’s see the example, which works for both horizontal and vertical borders.

Example of increasing the space between the dots of dotted borders:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 10px 50px;
      }
      .dotted {
        border-top: 1px #000 dotted;
      }
      .dotted-gradient {
        background-image: linear-gradient(to right, #000 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, #000 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: #f3fc38;
      }
      .left.dotted {
        border-left: 1px #000 dotted;
        border-top: none;
      }
      .left.dotted-gradient {
        background-image: linear-gradient(to bottom, #000 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, #000 10%, rgba(255, 255, 255, 0) 0%);
        background-position: left;
        background-size: 1px 10px;
        background-repeat: repeat-y;
      }
    </style>
  </head>
  <body>
    <div>no border</div>
    <div class='dotted'>dotted border</div>
    <div class='dotted-gradient'>dotted border with gradient</div>
    <div class='dotted-spaced'>dotted spaced border</div>
    <div class='left'>no border</div>
    <div class='dotted left'>dotted border</div>
    <div class='dotted-gradient left'>dotted border with gradient</div>
    <div class='dotted-spaced left'>dotted spaced border</div>
  </body>
</html>

Try it Yourself »

Result

no border

dotted border

dotted border with gradient

dotted spaced border