[html] How to draw a dotted line with css?

How can I draw a dotted line with CSS?

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

w3schools.com reference

use like this:

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

this line should work for you:

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

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

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

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).

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.

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

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

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

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;

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

Try dashed...

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

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