Tag hr

A tag hr define uma linha horizontal divisória. A vantagem da tag é que, para desenhar uma linha única, não é necessário criar blocos extras. Não requer tag de fechamento.

Exemplo

Vamos ver como a tag hr funciona:

html<hr>

Результат:

Exemplo

Vamos tentar mudar a cor da linha usando a propriedade CSS border-color:

html<hr style="border-color: red;">

Результат:

Exemplo

A cor da linha também pode ser alterada pela propriedade color (entretanto, se as propriedades color e border-color forem definidas simultaneamente - a segunda tem prioridade):

html<hr style="color: red">

Результат:

Exemplo

Agora vamos mudar a cor da linha usando a propriedade CSS border. Observe que, com isso, a linha ficará com o dobro da espessura (pois definimos a borda em cima e em baixo):

html<hr style="border: 1px solid red;">

Результат:

Exemplo

Vamos tentar mudar a cor da linha usando a propriedade CSS border-top, e definir apenas a borda superior. Agora não haverá linha dupla:

html<hr style="border-top: 1px solid red;">

Результат:

Exemplo

Vamos fazer a linha pontilhada usando a propriedade CSS border-top, definindo o valor dotted em vez de solid:

html<hr style="border-top: 1px dotted red;">

Результат:

Exemplo

Vamos aumentar a espessura da linha usando a propriedade CSS border-width:

html<hr style="border-width: 10px; border-color: red;">

Результат:

Exemplo

Agora vamos adicionar altura height à linha e borda via border. A borda, com isso, será dividida em superior e inferior:

html<hr style="height: 10px; border: 1px solid red;">

Результат:

Veja também