Como ajustar a largura da borda usando CSS

No HTML, as fronteiras são projetadas para criar diferenças entre duas seções e para estilizar um elemento. Para esse fim, o “fronteira”A propriedade do CSS é utilizada. Esta propriedade permite que você ajuste a largura, o estilo e a cor da fronteira. A largura da borda depende da aparência do elemento em que aplicamos esta propriedade.

Neste manual, aprenderemos como ajustar a largura da fronteira.

Vamos começar!

O que é a propriedade de "fronteira" em CSS?

Em HTML, para projetar uma borda em torno de um elemento, o “fronteira”Propriedade é usada. Basicamente, é uma propriedade abreviada de “largura de fronteira","estilo de borda", e "Cor da borda”. É utilizado para definir a largura da fronteira, o estilo da fronteira e a cor da fronteira.

A sintaxe da propriedade de fronteira é:

Fronteira: cor do estilo de largura

Aqui está a descrição dos valores dados:

• • largura: É usado para ajustar a largura da borda.
  • estilo: É utilizado para o estilo da fronteira, como uma sólida, cume.
  • cor: É usado para mudar a cor da fronteira.

O "fronteira”A propriedade será implementada no exemplo a seguir.

Exemplo: Crie borda usando CSS

Neste exemplo, criaremos uma fronteira em torno de uma seção HTML e atribuiremos a classe “fronteira”Para isso. Dentro da seção, adicionaremos um parágrafo usando o

marcação:

"O sucesso não é final; o fracasso não é fatal:
É a coragem de continuar que conta." - Winston s. Churchill

Depois disso, mudaremos para o CSS e ajustaremos o comprimento da borda usando o “fronteira" propriedade.

Aqui, vamos usar “.fronteira”Para acessar a classe que atribuímos à seção. Nós definimos o valor da largura “5px", estilo "sólido", e cor "RGB (142, 26, 153)”. Por fim, a cor de fundo da seção é especificada como “Reg (214, 159, 181)”:

.fronteira
borda: 5px RGB sólido (142, 26, 153);
Background-Color: RGB (214, 159, 181);

Quando tudo estiver pronto, execute o arquivo HTML para ver a seguinte saída:

Observação: Você também pode aumentar ou diminuir a largura de acordo com sua preferência.

Exemplo 2: Ajuste a largura da borda em torno de uma imagem

Neste exemplo, ajustaremos a largura da borda em torno de uma imagem. Para fazer isso, adicionaremos uma imagem usando a tag no arquivo html:

Agora, vá para o arquivo CSS e defina a largura da borda, estilo, cor como “10px","sulco","RGB (255, 0, 0)”, Respectivamente:

img
borda: groove 10px RGB (255, 0, 0);

Isso nos dará a seguinte saída:

Observação: No "fronteira”Propriedade, você sempre precisa atribuir um valor positivo à largura.

Oferecemos o método para ajustar a largura da fronteira em torno de qualquer elemento.

Conclusão

No CSS, para ajustar a borda em torno de um elemento, o “fronteira”Propriedade é utilizada. Você pode aumentar e diminuir a largura da fronteira de acordo com a aparência necessária dos elementos. Neste artigo, explicamos como ajustar a largura da borda usando o “fronteiraPropriedade e forneça exemplos diferentes disso.