Como sabemos, o HTML fornece a estrutura das páginas da web, e o CSS pode ser utilizado para aplicar estilos. O CSS também possui diferentes propriedades de estilo que são usadas para desenhar formas diferentes, como quadrados, círculos, retângulos, ovais, linhas e muito mais. Mais especificamente, uma linha é um dos elementos mais versáteis e comumente usados ​​do design que podem ser adicionados horizontal e verticalmente.

Este artigo ensinará o procedimento a desenhar linhas horizontais e verticais usando CSS. Vamos começar!

Como desenhar uma linha com CSS?

Para desenhar linhas horizontais e verticais usando CSS, diferentes propriedades podem ser utilizadas, como:

• ““borda esquerda”
• ““fronteira-direita”
• ““Border-top”
• ““fundo de fronteira”

Vamos seguir em frente para entender o funcionamento das propriedades acima fornecidas uma por um!

Html
Para desenhar linhas, primeiro, especificaremos o “”Elemento dentro do corpo do nosso arquivo HTML:

Agora, para estilizar uma div, utilize as propriedades adequadas. No nosso caso, atribuiremos o “cor de fundo”Valor da propriedade como“#e4a2a4", e a "fronteira”Valor da propriedade como“2px Solid #0FAFC4”, Que indica sua largura, tipo e cor, respectivamente, e o“altura”A propriedade é definida como“200px”.

CSS

div
Background-Color: #e4a2a4;
borda: 2px Solid #0FAFC4;
Altura: 200px;

Exemplo 1: Desenhe linha horizontal com CSS
Geralmente, o

---

O elemento é utilizado para desenhar linhas horizontais em HTML. No entanto, para desenhar uma linha horizontal com CSS, adicione

elemento para o cabeçalho e depois coloque um nomeado “H_LINE”Dentro da div acima do arquivo html.

Html

Linha horizontal

Agora, use propriedades CSS para desenhar uma linha horizontal:

• Vamos usar o “fundo de fronteira”Propriedade, que está associada a um a três valores para largura de linha, tipo de linha e cor. O exemplo fornecido abaixo define seu valor como “6px RGB sólido (80,80,78)”.
• Para ajustar o tamanho da linha, definimos o “largura”Valor da propriedade como“300px”.
• O "margem”O valor da propriedade é definido como“auto”, Representando que a margem é igual de todos os lados. O "Bottom-top”A propriedade também pode ser utilizada para esse fim.

CSS

.H_LINE
fundo de borda: 6px RGB sólido (80, 80, 78);
Largura: 300px;
margem: automático;

Agora, salve o arquivo HTML e abra -o em seu navegador:

Como você pode ver, desenhamos uma linha horizontal com sucesso com a propriedade da fronteira CSS.

Exemplo 2: Desenhe linha vertical com CSS
Para desenhar uma linha vertical, vamos adicionar

tag para o cabeçalho e depois coloque um chamado “v_line”Dentro da div acima do arquivo html.

Html

Linha vertical

Vamos fornecer o “v_line”Div com algumas propriedades do CSS. Para desenhar uma linha vertical, utilizaremos:

• O "borda esquerda”A propriedade é atribuída com valores“5px RGB sólido (2, 99, 135)”, Onde o primeiro valor representa a largura da linha, o segundo valor representa o tipo de linha e o terceiro valor indica a cor.
• O "canto inferior direito”A propriedade também pode ser utilizada para o mesmo objetivo.
• Em seguida, definimos o “altura"Da linha, definindo seu valor como"100px”.
• Definir "margem" como "0 Auto”, Onde 0 indica a parte superior e inferior e automaticamente representa a margem igual à esquerda e direita.
• Para mostrar a largura da linha, atribuímos o “largura”Valor da propriedade como“2px”.

CSS

.v_line
Interação da borda: 5px RGB sólido (2, 99, 135);
Altura: 100px;
margem: 0 automático;
Largura: 2px;

A aplicação desses valores desenhará uma linha vertical como esta:

É isso! Usamos diferentes propriedades CSS para desenhar linhas horizontais e verticais.

Conclusão

Você pode usar o “Border-top" ou "fundo de fronteira”Propriedades para desenhar uma linha horizontal e a“ “borda esquerda" ou "fronteira-direita”Propriedades para desenhar uma linha vertical no CSS. Essa propriedade tem valores de um a três, onde o primeiro valor define a largura, o segundo valor define seu tipo, sólido, pontilhado, tracejado ou ranhura e o terceiro valor indica a cor da linha. Este guia explicou como desenhar linhas horizontais e verticais com CSS.