How to draw a dashed line css?

Question

How to draw a dashed line using CSS?

Answer 1

For example:

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

See also <hr> Style with CSS .

Answer 2

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

Answer 3

Found the answer here with a google search for "css dotted lines":

 <div class="horizontal_dotted_line"></div> 

and in styles.css:

 .horizontal_dotted_line{ border-bottom: 1px dotted [color]; width: [put your width here]px; } 

Answer 4

The accepted answer has a lot of toughness that is no longer required for modern browsers. I personally tested the following CSS in all browsers back in IE8, and it works great.

  hr { border: none; border-top: 1px dotted black; } 

border: none should be the first to remove all default styles that browsers apply to hr tags.

Answer 5

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

link w3schools.com

Answer 6

this line should work for you:

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

Answer 7

 .myclass { border-bottom: thin red dotted; } 

Answer 8

Add the following element to the element you want to have a dashed line.

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

Answer 9

I tried all the solutions here and no one gave a clean 1px line. To do this, follow these steps:

 border: none; border-top: 1px dotted #000; 

As an alternative:

  border-top: 1px dotted #000; border-right: none; border-bottom: none; border-left: none; 

Answer 10

use the following:

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

Answer 11

To do this, you just need to add the border-top or border-bottom tag to the <hr/> as follows:

 <hr style="border-top: 2px dotted navy" /> 

with any type of line or color you want

Answer 12

Using hr , two lines are created for me, one solid and one dashed.

I found this worked quite well:

 div { border-top: 1px dotted #cccccc; color: #ffffff; background-color: #ffffff; height: 1px; width: 95%; } 

Also, since you can make the width as a percentage, it will always have some space on both sides (even when resizing the window).

Answer 13

Try the dotted line ...

 <hr style="border-top: 2px dashed black;color:transparent;"/> 

Answer 14

The removed line after the item:

http://jsfiddle.net/korigan/ubtkc17e/

HTML

 <h2 class="dotted-line">Lorem ipsum</h2> 

CSS

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