How to draw a dotted line with css

Question

How can I draw a dotted line with CSS

User · Answer

lt style gt       dotted  border  1px dotted  ff0000  border-style  none none dotted  color   fff  background-color   fff     lt  style gt   lt hr class  dotted    gt

User · Answer

Using HTML    lt div class  horizontal dotted line  gt  lt  div gt   and in styles css    horizontal dotted line    border-bottom  1px dotted  color     width   put your width here px

User · Answer

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

User · Answer

To do this  you simple need to add a border-top or border-bottom to your  lt hr  gt  tag as the following    lt hr style  border-top  2px dotted navy    gt    with any line type or color you want

User · Answer

myclass       border-bottom  thin red dotted

User · Answer

Add following attribute to the element you want to have dotted line   style  border-bottom  1px dotted  ff0000

User · Answer

Using hr created two lines for me  one solid and one dotted   I found that this worked 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

User · Answer

Dooted line after element    http   jsfiddle net korigan ubtkc17e   HTML   lt h2 class  dotted-line  gt Lorem ipsum lt  h2 gt    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

User · Answer

Try dashed        lt hr style  border-top  2px dashed black color transparent    gt

User · Answer

this line should work for you    lt hr style  border-top  2px dotted black   gt

User · Answer

Do you mean something like  border  1px dotted black    w3schools com reference

User · Answer

use like this    lt hr style  border-bottom dotted    gt

User · Answer

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

User · Answer

For example   hr     border none    border-top 1px dotted  f00    color  fff    background-color  fff    height 1px    width 50       See also Styling  lt hr gt  with CSS

[html] How to draw a dotted line with css?

Examples related to html

Examples related to css