Docs executáveis de HTML: Linha horizontal

Q: Como colocar uma linha horizontal no HTML?

Use a tag numa linha própria. É um elemento vazio, sem tag de fechamento, e desenha uma linha em toda a largura do seu contêiner.

Q: Como mudar a cor de um hr?

Remova a borda padrão e desenhe a sua: hr { border: none; border-top: 2px solid #2563eb; }. Definir só color também muda a linha, mas o estilo inset padrão a mantém sombreada e em dois tons.

Q: Como deixar um hr mais grosso?

Defina a largura da borda: hr { border: none; border-top: 4px solid #111827; }. O atributo size dos tutoriais antigos ainda funciona nos navegadores, mas está obsoleto, então use CSS.

Linha horizontal em HTML: a tag hr e como estilizá-la

Desenhe uma linha horizontal no HTML com a tag <hr>. Veja o que ela significa, como mudar cor, espessura, largura e estilo com CSS, como montar um divisor com texto no meio e como fazer uma linha vertical.

Esta página tem editores executáveis - edite, execute e veja a saída na hora.

Por Kevin Spektor, Co-founder & CTO

Publicado em Sep 24, 2026

Como adicionar uma linha horizontal

Coloque <hr> entre dois blocos de conteúdo. Ela não tem tag de fechamento:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hr</title>
  <style>
    body { font-family: system-ui, sans-serif; }
  </style>
</head>
<body>
  <p>The end of the first part of the story.</p>
  <hr>
  <p>Three weeks later, a new part begins.</p>
</body>
</html>

Por padrão a linha ocupa toda a largura do contêiner, tem uma pequena margem acima e abaixo e é desenhada como uma borda inset cinza fina (uma borda clara e uma escura).

<hr> vem de horizontal rule. No HTML ela significa uma quebra temática: uma mudança de assunto ou de cena dentro de uma seção. Os leitores de tela a anunciam como separador. Se você só quer uma linha decorativa (embaixo de um título, em volta de um card), desenhe-a com uma borda CSS nesse elemento.

Estilizando um hr com CSS

A aparência padrão vem das bordas, então o jeito confiável de estilizar um <hr> é removê-las e desenhar uma borda você mesmo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hr styles</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    hr { margin: 20px 0; }
    .blue { border: none; border-top: 2px solid #2563eb; }
    .thick { border: none; border-top: 6px solid #111827; }
    .dashed { border: none; border-top: 2px dashed #f59e0b; }
    .dotted { border: none; border-top: 3px dotted #16a34a; }
    .short { border: none; border-top: 2px solid #9ca3af; width: 40%; margin-inline: auto; }
    .round { border: none; height: 6px; background: #2563eb; border-radius: 3px; }
  </style>
</head>
<body>
  <hr>
  <hr class="blue">
  <hr class="thick">
  <hr class="dashed">
  <hr class="dotted">
  <hr class="short">
  <hr class="round">
</body>
</html>

Para mudar	Use
Cor	`border-top: 2px solid #2563eb` (depois de `border: none`)
Espessura	A largura dessa borda, como `6px`
Estilo	`solid`, `dashed`, `dotted`, `double`
Comprimento	`width: 40%`, mais `margin-inline: auto` para centralizar
Pontas arredondadas	`height` + `background` + `border-radius` em vez de uma borda
Espaço em volta	`margin`

Definir só color: blue num hr muda a linha nos navegadores atuais, mas o estilo inset padrão a sombreia e ela mantém 2px de altura. Zerar a borda dá exatamente o que você pede.

Atributos antigos do hr

Código antigo usa atributos na própria tag:

<hr size="4" width="50%" color="red" noshade align="left">

size, width, color, noshade e align estão obsoletos. Os navegadores ainda os aplicam para que páginas antigas fiquem certas, mas são HTML inválido e mais difíceis de mudar depois. Troque pelo CSS acima.

Um divisor com texto no meio

A linha com "ou" entre dois botões de login não é um <hr> (um hr não pode conter texto). É uma linha flex com um traço desenhado de cada lado da palavra:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Divider with text</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 320px; }
    .divider { display: flex; align-items: center; gap: 12px; color: #6b7280; font-size: 14px; }
    .divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid #d1d5db; }
    button { width: 100%; padding: 10px; }
  </style>
</head>
<body>
  <button type="button">Continue with email</button>
  <p class="divider">or</p>
  <button type="button">Continue with a passkey</button>
</body>
</html>

As duas partes ::before e ::after pegam cada uma metade do espaço livre com flex: 1 e desenham uma borda superior. Troque or por uma palavra mais longa e as linhas encolhem para caber.

Linhas verticais

Não existe versão vertical do <hr>. Desenhe uma linha vertical com uma borda num lado de um elemento, ou com um elemento fino dentro de uma linha flex:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vertical line</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .quote { border-inline-start: 4px solid #2563eb; padding-inline-start: 12px; }
    .row { display: flex; align-items: center; gap: 16px; }
    .vr { width: 1px; align-self: stretch; background: #d1d5db; }
  </style>
</head>
<body>
  <p class="quote">A border on the start side makes a vertical line.</p>
  <div class="row">
    <span>Home</span>
    <span class="vr"></span>
    <span>Docs</span>
    <span class="vr"></span>
    <span>Blog</span>
  </div>
</body>
</html>

border-inline-start coloca a linha no início do texto, que é a esquerda em português e a direita em árabe ou hebraico, então o layout funciona nas duas direções.

Erros comuns

Escrever </hr>. <hr> é um elemento vazio. <hr> ou <hr /> é tudo de que você precisa.
Usar <hr> como decoração. Os leitores de tela anunciam cada um. Uma linha só visual pertence ao CSS.
Estilizar só com color. Zere a borda com border: none e defina border-top.
Usar <br> ou sublinhados para desenhar linhas. Use <hr> ou uma borda. Veja quebra de linha para saber para que serve o <br>.
Usar atributos obsoletos. Leve size, width, color e noshade para o CSS.

Perguntas frequentes

Como colocar uma linha horizontal no HTML?

Use a tag <hr> numa linha própria. É um elemento vazio, sem tag de fechamento, e desenha uma linha em toda a largura do seu contêiner.

Como mudar a cor de um hr?

Remova a borda padrão e desenhe a sua: hr { border: none; border-top: 2px solid #2563eb; }. Definir só color também muda a linha, mas o estilo inset padrão a mantém sombreada e em dois tons.

Como deixar um hr mais grosso?

Defina a largura da borda: hr { border: none; border-top: 4px solid #111827; }. O atributo size dos tutoriais antigos ainda funciona nos navegadores, mas está obsoleto, então use CSS.

O que significa hr?

Horizontal rule, linha horizontal. No HTML atual ela significa uma quebra temática: uma mudança de assunto ou de cena entre parágrafos. Os leitores de tela a anunciam como separador.

Como fazer uma linha vertical no HTML?

O HTML não tem tag de linha vertical. Adicione uma borda a um lado de um elemento, como border-inline-start: 2px solid #e5e7eb, ou use um elemento estreito com cor de fundo dentro de uma linha flex.

Conceitos relacionados