<hr /> höhe und farbe ändern?

Hallo, ich möchte von meinem <hr/> Tag die höhe (also die dicke) und die Farbe ändern. Wie mache ich das am besten. Natürlich in Css

Answer 1

[ChrisCat1, UserMod Light]

hr {
  color: red;
  border-width: 10px;
}

https://www.w3schools.com/tags/tag_hr.asp
https://www.w3schools.com/css/css_colors.asp
https://www.w3schools.com/css/css_border.asp

Comments

[troloxi]

Darum ist ein weißer Rand.

[ChrisCat1, UserMod Light]

@troloxi

Ich bekomme da keinen weißen Rand angezeigt.

Versuch es aber sonst mal mit border-color anstelle von color. Im Google Chrome wird die Farbe bei mir sonst nicht übernommen sondern im Standard grau-weiß angezeigt.

Hier resultiert das weiß dann aber aus dem Standard border-style des Elements.
Es könnte also auch helfen einen anderen border-style zu definieren.
https://www.w3schools.com/cssref/pr_border-style.asp

margin-top und margin-bottom haben standardmäßig den Wert 0.5em. Möglicherweise bekommst du auch dadurch einen Rand.

Answer 2

[Steffile]

hr {
border:0; /* da ich nicht weiss ob das top oder bottom border ist, nehme ich sie erstmal ganz raus */
border-bottom: 5px solid #ddd; /* und fuege eine neue hinzu */
}

Comments

[troloxi]

https://prnt.sc/sed6k0

es geht bei mir nicht ganz durch, wie löse ich das?

[troloxi]

Also darum ist noch ein weißer rand

[Steffile]

@troloxi

Dann schau im Inspektor wo der Rand herstammt. So theoretisch kann man das leider nicht sagen

Answer 3

[derkleinefrank]

<hr style="height: 3px; width: 100%; background: linear-gradient(to right, #7BC618, #FF0000); border: 0;" />

Answer 4

[nephilim09]

Mmmh, schau dir doch mal diese Website an, klingt für mich vernünftig: https://www.w3schools.com/howto/howto_css_style_hr.asp