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

10 thoughts on “Estilizando um HR com CSS

  1. 21 março 2007 at 12:15 am

    tah tinha visto isso uehuehuhehe

    mas hr num tah com muito coisa naum…
    uehuhe

  2. 23 março 2007 at 1:03 am

    muito bom..

    mas o hr tem um problema, ele “fecha” alguns elementos, como o “p”

  3. Thiago
    24 outubro 2007 at 9:58 am

    Muito bom tutorial.
    Parabéns!

  4. 19 fevereiro 2008 at 1:35 pm

    Legal procurei no maujor.com … e aqui vc resumiu melhor!
    ;)

  5. 4 março 2008 at 7:06 pm

    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.

  6. 17 janeiro 2009 at 5:24 pm

    Muito bom o seu tutorial! Só uma diquinha pro pessoal: Tente:
    no style: hr {border-top: 1px dashed #f00;} no hr , o sombreado fica bom, não use noshade…!

  7. 12 abril 2009 at 11:47 pm

    Eu gosto da tag, é simples e rapida, boas dicas.

  8. 3 junho 2009 at 11:45 am

    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…

  9. Marcos Vicente
    23 julho 2009 at 6:04 pm

    Beleza!!! Estava procurando na internet um tempão.
    Já adcionei o seu site no favori’hits!!!

  10. 1 janeiro 2013 at 10:37 am

    Muito bom os exempos, parabens.

Deixe uma resposta

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