Estilizando um HR com CSS

Olá galera!

Alguém aí já usou ou usa a tag HR ? Para quem não conhece, a tag HR produz uma linha horizontal que pode fazer a divisão de conteúdos.

Eu particularmente gosto de usar esta tag para colocar “linhas” entre os conteúdos dos meus sites. Muita gente não adere ao HR, preferindo colocar bordas nas DIV’s. Mas é questão de gosto.

Neste post vou ensinar vocês a estilizarem a tag HR através de CSS.

A tag HR é definida do seguinte modo:

Pesquisando na internet, achei todas as propriedades que a tag HR aceita, segue abaixo a lista:

• O Mozilla, IE e Opera aceitam as propriedades “width” e “height” para a tag
• A propriedade “border” pode ser usada no Mozilla e no IE, mas não funciona corretamente no Opera.
• O Mozilla e o Opera usam a propriedade “background-color” para a cor do HR, já o IE utiliza a propriedade “color”
• Todos os três browsers citados acima aceitam a propriedade “background-image” para a tag HR

Exemplos:

1 Linha vermelha:

Código CSS:

hr {
      color: #f00;
      background-color: #f00;
      height: 5px;
    }

Visualização:

---

Um retângulo de bordas vermelhas e altura de 10px:

Código CSS:

hr {
      border: 1px solid #f00;
      color: #fff;
      background-color: #fff;
      height: 10px;
    }

Visualização:

---

2 linhas, uma acima da outra. O Opera mostra como um retangulo. Ambas são vermelhas, a primeira é pontilhada e a segunda é sólid.

Código CSS:

hr {
      border-top: 1px dashed #f00;
      border-bottom: 1px solid #f00;
      color: #fff;
      background-color: #fff;
      height: 4px;
    }

Visualização:

---

Espero que tenham gostado da dica.

Abraços