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

11 opiniões sobre “Estilizando um HR com CSS”

  1. Gostei, usei muito hr, mas hoje não faço mais uso dela. Havia me esquecido dessa tag, por tanto tempo sem usar, hehehe.

    Estava vendo um código fonte de um site e vi ela, e ae pesquisei sobre ela e vim parar aqui. Também já te conhecia, mas também não lembrava de você, hahahaha !

    Add o feed, muito legal o conteúdo, abraços.

  2. Bem jóia o tutorial, me ajudou bastante. Parabéns!
    Porém você comenta que o todos os três citados acima aceitam a propriedade “background-image” para a tag HR.
    O IE não aceita muito bem essa propriedade não ein…

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>