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

Source Code: (back to article)

<!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>