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

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

Inscrever-se
Notificar de
guest

2 Comentários
mais antigos
mais recentes Mais votado
Feedbacks embutidos
Ver todos os comentários
Jadson

putz man, um negócio tão simples de fazer mas que a gente tem dificuldade de elaborar sozinho!

Battisti

opa Jadson, com a prática e vivência começa a ficar mais natural, sem se preocupa =)