How to draw a dotted line with css?

How can I draw a dotted line with CSS?

Solution 1:

For example:

hr {
  border: none;
  border-top: 1px dotted #f00;
  color: #fff;
  background-color: #fff;
  height: 1px;
  width: 50%;
}

before
<hr>
after

See also Styling <hr> with CSS.

Solution 2:

The accepted answer has a lot of cruft that is no longer required for modern browsers. I have personally tested the following CSS on all browsers as far back as IE8, and it works perfectly.

 hr {
    border: none;
    border-top: 1px dotted black;
  }

border: none must come first, to remove all the default border styling that browsers apply to hr tags.

Solution 3:

<style>
    .dotted {border: 1px dotted #ff0000; border-style: none none dotted; color: #fff; background-color: #fff; }
</style>
<hr class='dotted' />

Solution 4:

Using HTML:

<div class="horizontal_dotted_line"></div>

and in styles.css:

.horizontal_dotted_line{
  border-bottom: 1px dotted [color];
  width: [put your width here]px;
}