Advertisement
How to draw a dotted line with css?
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
Read more... Read less...
<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
Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Email: [email protected]