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