Como fazer uma linha vertical com CSS

Publicado em 28/05/2020

Neste artigo veremos como fazer uma linha vertical no seu projeto HTML, apenas com CSS de uma forma prática e rápida, que fica semelhante a um elemento hr.

criar linha vertical com css capa

Fala programador(a), tudo certo? Bora aprender a criar uma linha vertical!

A ideia de criar uma linha vertical é completamente diferente de só por um elemento semelhante ao hr

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

120 aulas
4 projetos
9h 45min

Que para quem não sabe exibe uma linha na horizontal, mas eu particularmente não aconselho pois acaba te limitando muito

Já da forma que veremos neste artigo, você poderá criar também linhas horizontais da forma que controle todos os aspectos dela com o CSS

Vamos então a o exemplo:

<!DOCTYPE html>
<html>
<head>
    <title>Como criar uma linha vertical com CSS</title>
    <meta charset="utf-8">
</head>
<body>
    <div id="linha-vertical"></div>
    <div id="linha-horizontal"></div>
</body>
</html>

Criamos aqui um HTML bem básico, com duas divs que vão representar nossas linhas: a vertical e a horizontal

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Agora vamos ao CSS para realizar estas linhas:

#linha-vertical {
    height: 200px;
    border-right: 1px solid red;
}

#linha-horizontal {
    width: 300px;
    border: 1px solid #000;
}

Veja o que é representado no navegador:

linha vertical com css ex 1

Agora vamos ver em detalhes o que aconteceu no código, simplesmente criamos uma div e determinamos uma altura, se a linha for vertical, ou largura, se a linha for horizontal

Isso vai servir para que nossa linha tenha o tamanho que julgarmos necessário

Por fim, determinamos uma borda que é a espessura da linha e também podemos definir a sua cor

E então a linha estará pronta, tanto na forma vertical quanto na horizontal 🙂

Conclusão

Neste artigo vimos omo criar uma linha vertical e também linhas horizontais com CSS puro

Apenas precisamos determinar uma largura ou altura, em uma div

E depois utilizar a regra de border para manipular a espessura e cor da nossa linha

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Escrito por | Matheus Battisti

Fundador da Hora de Codar

Programador apaixonado pelo mundo das tecnologias, sempre buscando em aprender e se aprofundar em linguagens, frameworks e o que mais for necessário para executar um bom trabalho. Agora tem uma nova missão que é de passar seu conhecimento adiante para formar novos programadores e especializar mais os que já são.

Canal no YouTube LinkedIn