<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
4 Antworten
![](https://images.gutefrage.net/media/user/ChrisCat1/1630678964620_nmmslarge__0_0_180_180_7ec871f8619df475ece7f978ac159cc1.png?v=1630678965000)
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
![](https://images.gutefrage.net/media/user/ChrisCat1/1630678964620_nmmslarge__0_0_180_180_7ec871f8619df475ece7f978ac159cc1.png?v=1630678965000)
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.
![](https://images.gutefrage.net/media/user/Steffile/1662319155183_nmmslarge__0_0_400_400_a7448469a17c2ce8ed07251058ff274b.png?v=1662319155000)
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 */
}
![](https://images.gutefrage.net/media/default/user/11_nmmslarge.png?v=1551279448000)
es geht bei mir nicht ganz durch, wie löse ich das?
![](https://images.gutefrage.net/media/default/user/11_nmmslarge.png?v=1551279448000)
![](https://images.gutefrage.net/media/default/user/13_nmmslarge.png?v=1551279448000)
<hr style="height: 3px; width: 100%; background: linear-gradient(to right, #7BC618, #FF0000); border: 0;" />
![](https://images.gutefrage.net/media/default/user/14_nmmslarge.png?v=1551279448000)
Mmmh, schau dir doch mal diese Website an, klingt für mich vernünftig: https://www.w3schools.com/howto/howto_css_style_hr.asp
Darum ist ein weißer Rand.