How to draw a dotted line with css?

Question

How to draw a dotted line with css?

Question

How can I draw a dotted line with CSS?

2015/09/01

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

rahul

2009/11/17

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

Brendan Long

2018/02/17

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.

coredumperror

2014/09/11

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

w3schools.com reference

ChssPly76

2009/11/17

this line should work for you:

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

2013/06/02

Sinan Ünür · Accepted Answer · 9/13/2016 3:46:08 AM

Accepted Answer

For example:

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