Tamanho da borda CSS

“Neste artigo, explicaremos como alterar o tamanho da fronteira usando diferentes abordagens no CSS em um arquivo html. Um contêiner de div contém uma borda com muitos estilos distintos e atributos estéticos como cor, tamanho, forma e assim por diante. Neste artigo, usaremos o Notepad ++ para editar um arquivo HTML, alterando o tamanho da fronteira usando propriedades diferentes que o CSS fornece, como a largura da borda.”

Exemplo 01: Usando a tag de estilo CSS para redimensionar uma borda em um arquivo html

Neste exemplo, estaremos alterando o tamanho de uma borda de um contêiner de div usando CSS na etiqueta da cabeça em um arquivo html. Definiremos uma função universal para todos os contêineres da div que serão criados neste arquivo para ter o estilo de edição predefinido que definiremos na seção DIV presente na tag de estilo. Então, para realizar esta tarefa, geraremos o seguinte script:

Como podemos ver no script acima de um arquivo html, abrimos uma etiqueta de estilo na qual uma div é chamada que possui várias propriedades definidas uma por uma. Primeiro é o preenchimento, que dará ao contêiner ao Div um espaço entre a página do navegador e as fronteiras. Em seguida, chamamos a própria propriedade da fronteira e, nesta propriedade, definiremos o tamanho da borda e o tipo de borda; No nosso caso, ele está definido como "1px" e "sólido.”Então adicionamos kits da web que apoiarão os navegadores mais usados ​​na mesma função de propriedade. Em seguida, fechamos o estilo e a cabeça da cabeça e abrimos a etiqueta corporal. Nesta tag, mencionamos tudo o que estará presente na página assim que este arquivo for aberto em um navegador.

Adicionamos um título usando a etiqueta "H2" e também adicionamos um contêiner de div com algum texto. Este contêiner de div herdará todas as propriedades definidas na tag de estilo, que está presente no cabeçalho do arquivo. Essas tags serão fechadas depois disso. E agora, salvaremos este arquivo no “.formato html ”e abra -o no navegador para ver a seguinte saída:

Como podemos ver na saída acima, o cabeçalho e o contêiner Div estão presentes, e a borda do recipiente também é mostrada com um tamanho fino junto com algum texto nele.

Agora, editaremos o script acima e faremos alterações no tamanho da borda na etiqueta de estilo da seção do cabeçalho para visualizar a diferença entre o tamanho da borda do contêiner.

Ajustamos o tamanho de "1px" para "5px" no script acima para gerar uma borda mais espessa para o contêiner. Vamos agora observar como essa mudança aparece em nosso navegador quando executarmos o script.

Como podemos ver na saída acima, o tamanho da borda agora é grosso em comparação com a saída anterior.

Exemplo # 02: Criando uma classe na tag de estilo CSS para controlar o tamanho de uma borda em um arquivo html

Neste exemplo, criaremos uma classe especial de estilo CSS, no qual definiremos todos os aspectos do estilo que queremos ao longo do arquivo. Este é um método muito útil, porque podemos distinguir projetos diferentes em um único arquivo HTML e classificá -los em diferentes classes. Neste exemplo, classificaremos o estilo de uma fronteira de qualquer contêiner. Para conseguir isso, escreveremos o seguinte script:

Como podemos ver neste script, abrimos uma etiqueta de estilo no cabeçalho do arquivo html. Nesta tag de estilo, criamos uma classe para o estilo de tag de parágrafo, no qual definimos duas propriedades para a fronteira, que são estilo e largura. A propriedade de estilo está definida como sólida, o que significa que a borda será uma linha uniforme e reta, e a propriedade de largura é definida para diminuir, o que significa que o tamanho da borda será fino. Depois disso, fechamos o estilo e a cabeça e nos movimos em direção à etiqueta corporal. Na etiqueta corporal, demos um título e um parágrafo à página HTML. Na tag de parágrafo, chamamos de “P.classe BW1 ”, que tem as propriedades de fronteira predefinidas. Vamos fechar as tags e salvar este arquivo para que possamos executar isso em nosso navegador.

Depois de executar este script em nosso navegador, obteremos a saída acima. Como podemos ver, a classe de estilo para a etiqueta do parágrafo adicionou uma borda sólida e fina ao parágrafo presente no corpo.

Agora, variaremos o tamanho da borda presente no script acima e observaremos o efeito dessas variações na borda.

Nesta situação, editamos a largura de fina a média e, depois de executar este script, obteremos a seguinte saída:

Nesta saída, o tamanho da borda mudou de fino para médio e agora é muito mais visível. Depois disso, mudaremos o tamanho de médio para o espesso, conforme mostrado no script abaixo:

Depois de executar este script, obteremos a seguinte saída:

Depois de mudar a largura para grossa, podemos ver que a borda é muito mais ampla em tamanho e facilmente visível.

Exemplo # 03: Usando a folha de estilo CSS do Tailwind CSS para alterar o tamanho da borda usando a classe de borda

Neste exemplo, usaremos a folha de estilo CSS do Tailwind CSS para alterar o tamanho de uma borda usando uma classe de borda definida nesta folha de estilo. A classe de fronteira tem vários tamanhos predefinidos para a fronteira, que exploraremos neste exemplo implementando isso no bloco de notas++.

No script acima, adicionaremos o link à folha de estilo CSS do Tailwind CSS usando a tag de link no cabeçalho do arquivo. Então vamos abrir a etiqueta corporal e dar uma volta a ela. Em seguida, abriremos a tag div, que chamaremos de classe de borda-2 com código de cor da borda e, em seguida, a tag de parágrafo terá o texto do corpo do contêiner div. Agora, salvaremos este arquivo e o abriremos em nosso navegador para ver como a fronteira acaba.

Como podemos ver que o tamanho da borda é muito fino e pode ser ajustado para um tamanho maior, por isso aumentaremos o tamanho chamando a classe Border-8 e verá como isso muda o tamanho da borda.

Como podemos ver no trecho acima, a borda agora é mais espessa do que antes por causa da classe Border-8.

Conclusão

Neste artigo, focamos no atributo "tamanho" do CSS de uma borda. O tamanho da borda é comumente especificado com dois identificadores: pixels e representação textual, como "fino", "médio" e "grosso.”Discutimos vários métodos para alterar o tamanho da borda usando CSS em um arquivo html neste artigo. Utilizamos o ambiente do bloco de notas ++ para editar nosso arquivo HTML e implementar métodos convencionais de tag de estilo e estilo de estilo para alterar o tamanho de uma borda. Também usamos a folha de estilo CS do Tailwind CS para chamar suas classes de fronteira, que forneciam tamanhos diferentes para a fronteira de um contêiner e podem ser chamados via estilo CSS embutido.