How can I draw a dotted line with CSS?
18 Answers
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.
-
3As IE 6 (can't remember for IE7) won't understand the "dotted" style, you can tell him to use "dashed" instead, using of course conditional comments to aim IE6 and no other browser. Nov 17, 2009 at 11:18
-
height: 0px; works on Chrome because the borders are separate from the height.– BenJul 30, 2012 at 15:28
-
You should understand that dotted, dashed lines can look different in many browsers. That's more related to dashed lines.– RantievOct 26, 2016 at 20:08
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 your CSS:
.horizontal_dotted_line {
border-bottom: 1px dotted [color];
width: [put your width here]px;
}
<style>
.dotted {border: 1px dotted #ff0000; border-style: none none dotted; color: #fff; background-color: #fff; }
</style>
<hr class='dotted' />
This line should work for you:
<hr style="border: none; 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
.dotted-line {
border-bottom: thin red dotted;
}
-
-
Fixed. I was mixing up dotted and dashed. Plus my answer would have given you a whole border rather than a single line. Nov 17, 2009 at 4:05
You can add a dotted line using the ::after
pseudo-element.
.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;
}
<h2 class="dotted-line">Lorem ipsum</h2>
Add following attribute to the element you want to have dotted line.
style="border-bottom: 1px dotted #ff0000;"
I love "background-image: radial-gradient ... "
h2 {position: relative}
h2:after {
content: '';
display: inline-block;
width: 100%;
height: 60px;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -60px;
background-image: radial-gradient( ellipse, #000 2px, #000 3px, transparent 3px) ;
background-size: 20px 20px;
background-position: 0px 0;
background-repeat: repeat-x;
}
<h2>REAL CSS DOTTED LINE</h2>
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;
You can hide the default hr
border using color: transparent
. Then add a dashed line to the top border.
<hr style="border-top: 2px dashed black; color: transparent;" />
Using hr
created two lines for me, one solid and one dotted.
I found that using a div
works 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).
There is a very easy way of doing it, basically your <hr>
accepts the border-style for each side of the quadrilateral. So you can just specify it as, for the value of none being the sides of the quadrilateral and bottom of the quadrilateral.
hr { border-style: dotted none none;}
Each browser (Chrome, Firefox, etc.) applies slightly different styles to <hr>
elements. There are no guarantees about what these styles are.
Therefore, the most robust approach is to clear out the browser's styles using all: initial
, and then apply the dotted border.
hr {
all: initial;
display: block;
border-bottom: 2px dotted black;
}
<hr />
hr {
border-style: none;
border-top-style:dotted;
border-coler: gray;
border width: 5px;
width:5%
}
-
A code only answer with no explanation isn't a good answer. One that is littered with spelling mistakes and errors is a worse answer. One that is attempting to do the same thing as the accepted answer from a decade and a half ago is pointless.– QuentinApr 4 at 13:46
-