How to draw a dotted line with CSS?

Detailed guide and options

For more comprehensive control over your dotted line's appearance, check out the following tips and examples.

Scaling size and orientation

For a more size-specific dotted line or to change orientation, utilize these examples:

// Because not everyone wants a "full-width" horizontal line!
.dotted-horizontal {
  border-top: 1px dotted #000;  /* Thinner line, like a tiny baby snake */
  width: 100%;                  /* Full page width */
}

.dotted-vertical {
  border-left: 1px dotted #000; /* Vertical line, like a breadstick */
  height: 200px;                /* Custom height, because we like options */
}


Crafting rounder dots

Want your dots more rounded, because who doesn't love round things? Check out this trick:

// Like a line of tiny black pearls
.round-dots {
  border-style: dashed;              /* Start with dashed */
  border-width: 1px;
  border-color: #000;
  background-image: radial-gradient(#000 20%, transparent 20%); /* Create round dots */
  background-size: 10px 10px;      /* Spaces the dots out, like social distancing */
  background-position: center;
  background-repeat: repeat-x;     /* Horizontal line, like a line of ants with space */
}


Ensuring cross-browser compatibility

Don't let different browsers ruin your dotted line style. Ensure compatibility across them, even including I-wish-I-could-forget-you IE8.

// This one's for you, IE8. You stubborn, old mule.
.compatible-dots {
  border-style: dotted;
}


Advanced customization

For ultimate versatility, enter the realm of pseudo-elements (::before or ::after). Like a secret weapon in your CSS arsenal, they enable added creativity:

.fancy-dotted {
  position: relative;
}

.fancy-dotted::before {
  content: '';
  position: absolute; // Getting a little space, just like mom on a Sunday afternoon
  border-top: 1px dotted #000;
}


Dealing with complex backgrounds

To ensure your dots pop up against a busy background, slap on a background-color:

// Fighting the "lost in the crowd" syndrome, one dot at a time
.visible-dots {
  border-top: 1px dotted rgba(0, 0, 0, 0.5); // Light gray dots, because why not
  background-color: #fff; // Those gray dots will shine bright on white!
}


Tackling limitations and quirks

Beware of common "gotchas" with dotted lines:

• Scaling: Dots may not evenly fit if the container resizes. Just like my jeans after Thanksgiving. 🙈
• Alignment: Watch how various browsers render the line's start and end, especially if your border is thicker than four pixels — some results may surprise you.
• Colors: Gradient backgrounds might skew your nicely chosen dot colors due to anti-aliasing.

Make sure to test your designs across devices and browsers to catch these quirks before they do.