Propriedade do CSS Border-Left
Neste guia, usaremos esta propriedade e realizaremos exemplos diferentes em que usamos esta propriedade "borda esquerda" no CSS.
Exemplo 1
Crie o arquivo no código do Visual Studio e escolha o idioma HTML para criar o arquivo HTML. Devemos usar este arquivo para escrever parágrafos e aplicar a propriedade de borda esquerda nos parágrafos. Também devemos vincular nosso arquivo HTML ao arquivo CSS, para que todo o estilo que fazemos no arquivo CSS seja aplicado a ele.
Criamos dois parágrafos neste código HTML e os chamamos de "P1" e "P2". Definimos esses nomes porque devemos estilizar esses parágrafos separadamente no CSS. Esses nomes ajudarão quando aplicarmos o estilo a eles.
Código CSS:
Para estilizar o parágrafo um, usamos o nome "P1". Aqui, usamos as propriedades separadas para definir a borda para o lado esquerdo do parágrafo. Primeiro, definimos a “largura da borda” para “10px” para definir a largura da fronteira. Em seguida, definimos a “cor de borda-esquerda” para “magenta”. Ele define a cor da borda esquerda do parágrafo. Também definimos o "estilo de borda-esquerda" para "sólido". Isso significa que o tipo de borda é "sólido". Depois disso, definimos a “cor de fundo” de “P1” como “verde-claro”. Aumente o “tamanho da fonte” e defina-o como “25px” e alinhe “P1” no centro. Agora, vem "P2", em vez de usar todas as propriedades da largura, estilo e cor da borda esquerda, usamos apenas uma propriedade que é a propriedade "borda esquerda". Definimos todos os três estilos nesta propriedade. Usamos o mesmo estilo, largura e cor que usamos para "P1". A cor de fundo, o tamanho da fonte e o alinhamento de texto também são os mesmos que no "P1".
Saída:
Na saída, não há diferença entre o parágrafo "P1" e o parágrafo "P2". Portanto, em vez de usar propriedades separadas, damos prioridade à propriedade One, que é a propriedade "Border-Left".
Exemplo #2
Criamos um título e uma classe “div” com o nome “Border” e escrevemos uma linha dentro desta “div”. Agora, devemos aplicar a propriedade de borda esquerda na “div” fornecida pelo CSS.
Código CSS:
Para o cabeçalho, apenas mudamos a cor de fundo para "rosa" e depois passamos para a classe div chamada "Border". Aplicamos as diferentes propriedades a ele. A largura para esta divisão "borda" é "100%" e a altura é "200px". A cor de seu fundo é "azul -céu claro". Depois disso, usamos a “borda esquerda” e definimos o “4px” para a largura da borda esquerda. Esta borda está definida como "tracejada" no tipo. E a cor desta borda esquerda é definida como "vermelho".
Saída:
Aqui, vemos que nosso fundo de cabeçalho parece ser "rosa" e não há borda para este cabeçalho. Então, temos uma linha que escrevemos no “div”. Aqui está a borda esquerda desta linha. A borda aparece como "vermelha" em cores e é pontilhada. Selecionamos essas cores e estilos em nosso código CSS.
Exemplo #3
Usamos o mesmo código HTML que escrevemos em nosso exemplo anterior. Aqui, no CSS, definimos a cor "de coral leve" para o fundo do cabeçalho. A “família da fonte” usada para isso é “argelino”. Usamos o nome "div" "Border" e definimos sua largura como "110%" e sua altura para "210px". A cor de seu fundo é "laranja". Aqui, temos a propriedade "Border-Left". Nesta propriedade, a largura da fronteira que aparece no lado esquerdo é definida como “8px”. O tipo de borda que definimos aqui é "sólido". Temos que definir a cor para esta borda, então configuramos como “laranja”.
Saída:
A saída mostra a borda no lado esquerdo na cor verde e a largura desta borda é "8px". Definimos essa fronteira com a ajuda da propriedade "Border-Left".
Exemplo #4
Aqui, o fundo do cabeçalho é "Maroon", a "família da fonte" é "Times New Roman" e a cor da "fonte" é "branca". Agora, vem "div". Definimos sua "largura" e "altura" para "120%" e "220px", respectivamente. A cor do fundo para isso é definida como "verde-luz". Novamente, usamos a propriedade "Border-left" e, desta vez, definimos o tipo para "dobrar". Este "duplo" aparecerá como "linhas duplas" no lado esquerdo. A cor desta borda dupla é "preta" e é "9px" em "largura".
Saída:
Exemplo #5
Aqui, temos um cabeçalho, um parágrafo e uma div. Usaremos os diferentes tipos de borda no lado esquerdo de tudo isso usando a propriedade CSS embutida.
Código CSS:
Para o título, o tipo de borda-esquerda é "sólido", "5px" em largura e está definido como "verde" em cores. Para os parágrafos, usamos o “esquerda da borda” novamente. Desta vez, o tipo dessa borda é "pontilhado" e a cor é "azul". O "peso da fonte" do parágrafo é "ousado" e o tamanho da fonte do parágrafo é "20px". Também temos um "div" no qual definimos o tipo de borda esquerda como "pontilhado", "4px" e "vermelho" para a "largura" e "cor", respectivamente.
Saída:
A borda esquerda do cabeçalho, parágrafo e div aparecem em diferentes tipos. O cabeçalho na borda esquerda é verde sólido. A borda esquerda do parágrafo está no tipo pontilhado e na cor azul. A borda esquerda da div está no tipo duplo e a cor disso parece estar "vermelha".
Exemplo #6
Em nosso último exemplo, criamos o "cabeçalho", "div", "parágrafo" e "span". Usamos as diferentes fronteiras em tudo isso. Aplicamos a borda esquerda neles.
Código CSS:
Para o título, aplicamos o "estilo de borda-esquerda" que é "pontilhado". O "estilo de fonte" para isso é "itálico" e a cor do fundo é "azul claro". Agora, vem "div". A borda completa para este é o tipo "pontilhado" e o "borda esquerda" é "5px" em sua largura, "sólido" em seu tipo e "marrom" em sua cor. O fundo de "div" é definido como "rosa", "20px" em tamanho e alinhado no "centro". Depois disso, aplicamos o "borda esquerda" à largura "6px", tipo "sólido" e cor "magenta". A cor de fundo deste parágrafo é "verde claro". O "tamanho da fonte" que usamos aqui é "25px" e está alinhado no "centro". Agora, aplicamos a propriedade "borda esquerda" que é usada para "span" e definimos a largura, o tipo e a cor dessa "esquerda da borda" para "9px", "duplo" e "amarelo". Seu "tamanho da fonte" é "27px" e o texto está alinhado no "centro".
Saída:
Nesta saída, existem diferentes fronteiras de esquerda para todos esses. Aplicamos os três estilos de borda à esquerda aqui que são "pontilhados", "sólidos" e "duplos".
Conclusão
Este guia explorou o conceito de propriedade "borda esquerda" no CSS. Depois de ler este guia, aprendemos que esta propriedade é a propriedade abreviada de três propriedades. Usamos apenas uma propriedade em vez de usar as três propriedades-“largura de borda-esquerda”, “estilo de borda-esquerda” e “cor de borda-esquerda”-separadamente. Aqui, exploramos os seis exemplos diferentes e explicamos cada exemplo neste guia, desde a captura de tela das saídas desses códigos. Agora, depois de estudar este guia, você poderá usar esta propriedade em seus projetos ou sites.