Comment puis-je changer l'épaisseur de ma balise <hr>?

Question

Je veux changer l'épaisseur de ma règle horizontale (

---

) en CSS. Je sais que cela peut être fait en HTML comme ceci -

Mais j'entends dire que cela est déprécié comme mentionné sur MDN ici. En CSS, j'ai essayé d'utiliser height:1px mais cela ne change pas l'épaisseur. Je veux que la ligne

---

soit épaisse de 0.5px.

Je utilise Firefox 3.6.11 sur Ubuntu

Answer 1

L'attribut height a été déprécié en html 5. Ce que je ferais est de créer une bordure autour de la hr et d'augmenter l'épaisseur de la bordure comme ceci : hr style="border:solid 2px black;"

Answer 2

Je crois que la meilleure réalisation pour styler la balise

---

est la suivante:

hr {
    color: #ddd;
    background-color: #ddd;
    height: 1px;
    border: none;
    max-width: 100%;
}

Et pour le code HTML, ajoutez simplement:

---

.

Answer 3

Voici une solution pour une ligne noire de 1 pixel sans bordure ni marge

hr {background-color:black; border:none; height:1px; margin:0px;}

• Testé dans Google Chrome

J'ai pensé à ajouter cela car les autres réponses n'incluaient pas : margin:0px;.

• Démonstration

  hr {background-color:black; border:none; height:1px; margin:0px;}

  ↑ container ↑ ↓ hr ↓

  ↑ hr ↑ ↓ container ↓

Answer 4

Je suggère d'utiliser une construction comme

  .hr { height:0; border-top:1px solid _anycolor_; }
  .hr hr { display:none }