HTML | Linha horizontal

Atualizado dia 24 de maio de 2018.

A Linha Horizontal (horizontal rule) é um elemento HTML adicionado por meio da tag <hr>.

---

🔸 Dimensões e alinhamento

O elemento hr aceita alinhamento e redimensionamento, tanto de largura (width) como de espessura (height). Essa personalização permite até mesmo que você transforme uma linha horizontal em um retângulo ou em uma linha vertical.

Por padrão, as linhas horizontais são alinhadas à esquerda, têm largura de 100% da tela e o valor de height pode variar entre os navegadores.

〰️ Código 1:

<hr style="width: 90%; height: 5px; text-align:center" />

Exemplo 1:

---

〰️ Código 2:

<hr style="width: 50px; height: 50px; text-align:center" />

Exemplo 2:

---

〰️ Código 3:

<hr style="width: 50%; height: 1px; text-align:right" />

Exemplo 3:

---

〰️ Código 4:

<hr style="width: 5px; height: 300px; text-align:center" />

Exemplo 4:

---

🔸 Bordas

Pelos exemplos acima você percebe que o elemento <hr>, por padrão, tem uma borda que pode ser exibida de formas diferentes nos navegadores. Por isso é muito importante customizar esse atributo para que seus visitantes vejam do mesmo jeito, independente do browser.

〰️ Código 5:

<hr style="width: 90%; height: 5px; text-align:center; border:1px solid #ff0000;" />

Exemplo 5:

---

〰️ Código 6:

<hr style="width: 90%; height: 25px; text-align:center; border-width:5px 5px 8px 5px; border-style:dotted groove double ridge; border-color:#00ccff;" />

Exemplo 6:

---

🔸 Cores

Para o Internet Explorer, o atributo que define a cor da linha horizontal, é color. Para os demais navegadores, o atributo correto é background. Assim sendo, defina os dois atributos com o mesmo valor.

〰️ Código 7:

<hr style='width: 90%; height:5px; text-align:center; border:1px solid black; color:#ffff00; background:#ffff00;' />

Exemplo 7:

---

〰️ Código 8:

<hr style='width: 90%; height:5px; text-align:center; border:0px; color:#ff9999; background:#ff9999;' />

Exemplo 8:

---

🔸 Imagem como background da linha

Para que a imagem seja exibida no Internet Explorer, você não pode definir o atributo color. Para saber mais sobre imagens de fundo, visite o post Imagens no background.

〰️ Código 9:

<hr style='width: 100%; height:10px; text-align:center; border:0px; background:#000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6rxXGP_woVMqYWF_av70a-71Csr85foWwvhKTjX-IrgtzJyJjaZQKNUGbAX7JXa0a4tAf91NgBvYyGhyL5yrgXI_wPYcV9jDviAM2vMaurwffkTmLlC2r43lSq__MXCUjW2-piuek0lOz/s1600/3376916.png);' />

Exemplo 9:

---

〰️ Código 10:

<hr style="height:42px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI0U0Ki6bQF3bWZ3JhX-r9U8MNqyI4PTxG1SO-0JkPl_3kndMDD8XgghkN1Sg1Jtu0HeCW2MFpGffG3dH9no2fipE6RJFK7l8lbRKQbo_9Bqfsiut4zpADPOVS3vfqJgkNGlGuFYA1NhQ8/s1600/risca-giz-2.png) #000000 center center; border:5px dashed #ffff00; border-left:0px; border-right:0px;">

Exemplo 10:

---

🔸 Na folha de estilos:

Você pode definir como serão suas linhas horizontais diretamente na folha de estilos, como no exemplo:

hr {color:#ffcc00; background:#ffcc00; border:0px; width:90%; height:3px; text-align:center;}
]]></b:skin>

Exemplo:

---

Continua em:

• CSS | Personalizando a linha horizontal (hr) com cores e listras 🖌

Até mais!