124

How can I draw a dotted line with CSS?

0

18 Answers 18

161

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.

3
  • 3
    As 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.
    – FelipeAls
    Nov 17, 2009 at 11:18
  • height: 0px; works on Chrome because the borders are separate from the height.
    – Ben
    Jul 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.
    – Rantiev
    Oct 26, 2016 at 20:08
22

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.

20

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

This line should work for you:

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

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

w3schools.com reference

0
4

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

4
.dotted-line {
  border-bottom: thin red dotted;
}
2
  • Its a dashed line, not dotted one.
    – rahul
    Nov 17, 2009 at 4:03
  • 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
4

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>

3

Add following attribute to the element you want to have dotted line.

style="border-bottom: 1px dotted #ff0000;"
3

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>

3

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

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;" />
0
2

use like this:

<hr style="border-bottom:dotted" />
2

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).

0

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

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 />

0
hr {
  border-style: none;
  border-top-style:dotted;
  border-coler: gray;
  border width: 5px;
  width:5%
}
2
  • 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.
    – Quentin
    Apr 4 at 13:46
  • what is a noen?
    – Martin
    Apr 4 at 14:04

Not the answer you're looking for? Browse other questions tagged or ask your own question.