Advertisement
Advertisement


How to draw a dotted line with css?


Question

How can I draw a dotted line with CSS?

2015/09/01
1
98
9/1/2015 1:16:08 PM

Accepted Answer

For example:

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

See also Styling <hr> with CSS.

2016/09/13
131
9/13/2016 3:46:08 AM

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

2014/09/11

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

w3schools.com reference

2009/11/17

this line should work for you:

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

Source: https://stackoverflow.com/questions/1746491
Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Email: [email protected]