Wie man: Trennlinien erstellt

Lerne, wie man mit CSS verschiedene Trennlinien erstellt.

Wellenlinien

Punktförmig

Gestrichen

Abgerundet

Try it yourself

Wie man Trennlinien erstellt

Erster Schritt - HTML hinzufügen:

<hr class="dashed">
<hr class="dotted">
<hr class="solid">
<hr class="rounded">

Zweiter Schritt - CSS hinzufügen:

/* Wellenlinienrahmen */
hr.dashed {
  border-top: 3px dashed #bbb;
{}
/* Punktförmiger Rahmen */
hr.dotted {
  border-top: 3px dotted #bbb;
{}
/* Einfacher Rahmen */
hr.solid {
  border-top: 3px solid #bbb;
{}
/* Eckenförmiger Rahmen */
hr.rounded {
  border-top: 8px solid #bbb;
  border-radius: 5px;
{}

Try it yourself