How to draw a dotted line with css?

How can I draw a dotted line with CSS?

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.

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

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.

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;
} 

this line should work for you:

<hr style="border-top: 2px dotted black"/>

Do you mean something like 'border: 1px dotted black'?

http://www.w3schools.com/Css/css_border.asp">w3schools.com reference

.myclass {
    border-bottom: thin red dotted;
}

To do this, you simple need to add a border-top or border-bottom to your <hr/> tag as the following:

<hr style="border-top: 2px dotted navy" />

with any line type or color you want

Add following attribute to the element you want to have dotted line.

style="border-bottom: 1px dotted #ff0000;"

I tried all the solutions on here and none gave a clean 1px line. To achieve this do the following:

border: none; border-top: 1px dotted #000;

Alternatively:

 border-top: 1px dotted #000; border-right: none; border-bottom: none; border-left: none;

use like this:

<hr style="border-bottom:dotted" />

Dooted line after element :

http://jsfiddle.net/korigan/ubtkc17e/

HTML

<h2 class="dotted-line">Lorem ipsum</h2>

CSS

.dotted-line {
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.dotted-line:after {
  content: "..........................................................................................................";
  letter-spacing: 6px;
  font-size: 30px;
  color: #9cbfdb;
  display: inline-block;
  vertical-align: 3px;
  padding-left: 10px;
}

Using hr created two lines for me, one solid and one dotted.

I found that this worked quite well:

div {
border-top: 1px dotted #cccccc;
color: #ffffff;
background-color: #ffffff;
height: 1px;
width: 95%;
}

Plus, because you can make the width a percentage, it will always have some space on either side (even when you resize the window).

Try dashed...

<hr style="border-top: 2px dashed black;color:transparent;"/>

I love "background-image: radial-gradient ... "

h2 {position: relative}

h2:after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 60px;
  position: absolute;
  left: 50%;
  transform:  translateX(-50%);
  bottom: -60px;
  background-image: radial-gradient( ellipse, #000 2px, #000 3px, transparent 3px) ;
	background-size: 20px 20px;
	background-position: 0px 0;
  background-repeat: repeat-x;
}

<h2>REAL CSS DOTTED LINE</h2>