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:
<hr>
:
Exemplo
Vamos tentar mudar a cor da linha usando a
propriedade CSS border-color:
<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):
<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):
<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:
<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:
<hr style="border-top: 1px dotted red;">
:
Exemplo
Vamos aumentar a espessura da linha usando a
propriedade CSS border-width:
<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:
<hr style="height: 10px; border: 1px solid red;">
:
Veja também
-
a tag
br,
que define uma quebra de linha
