Wie zeichnet man eine gepunktete Linie mit css?

Question

Wie kann ich eine gepunktete Linie mit CSS zeichnen?

Answer 1

Zum Beispiel:

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

before
<hr>
after

Siehe auch Styling <hr> mit CSS .

Answer 2

Die akzeptierte Antwort enthält eine Menge Ballast, der für moderne Browser nicht mehr benötigt wird. Ich habe das folgende CSS persönlich auf allen Browsern bis hin zum IE8 getestet, und es funktioniert perfekt.

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

border: none muss zuerst kommen, um die Standard-Rahmengestaltung zu entfernen, die die Browser auf hr Tags.

Answer 3

HTML verwenden:

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

und in styles.css:

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

Answer 4

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

Answer 5

Sollte diese Zeile für Sie funktionieren:

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