CSS remove a borda

Dizem que as fronteiras são o limite ou limite sólido em torno de qualquer elemento dos elementos HTML nas páginas da web. Essas fronteiras podem ser destacadas com cores diferentes e espessuras diferentes usando a largura da borda da escolha do usuário. Além disso, pode -se adicionar ou remover um ou mais lados da borda em torno de qualquer elemento também usando a propriedade da fronteira CSS. Para remover ou adicionar fronteiras, não precisamos adicionar propriedades extras, mas as palavras -chave esquerda, direita, superior e inferior mais básicas. Vamos dar uma olhada em como remover as fronteiras de um elemento neste artigo hoje.

Exemplo 01:
Vamos começar com a ilustração mais básica de remover a fronteira de elementos específicos do script html. Para isso, estamos iniciando nosso código com a tag "html" do script html. Vamos discutir a etiqueta "corpo" primeiro, como mostrado abaixo. Utiliza dois títulos do maior tamanho, "1". Ambos os títulos são usados ​​aqui com títulos diferentes para diferenciá -los. Além disso, especificamos as classes "A" e "B" dentro das tags de título separadamente para usar essas classes no estilo para estilizar separadamente os dois títulos.

Dentro da tag "estilo", estivemos estilizando separadamente os títulos com o uso de suas classes "A" e "B". Adicionamos o preenchimento de 10 pixels e a largura de 400 pixels para os títulos através da propriedade de preenchimento e largura. Então, estamos atribuindo uma borda verde sólida de 3 pixels para o primeiro título através da propriedade da fronteira e, para o segundo título, a propriedade da fronteira foi definida para nenhum. Vamos salvar este script html e executá -lo dentro do navegador Chrome.

A saída para esta página da web foi exibida na guia Chrome. O primeiro título foi exibido com uma borda sólida verde de 3 pixels. O segundo título foi exibido sem borda, a mesma largura e algum estofamento.

Vamos dar uma olhada em como um lado de uma borda pode ser removido do elemento usando a propriedade de borda aprimorada. Assim, atualizamos o código acima, como mostrado na imagem abaixo. Temos usado a mesma etiqueta corporal junto com suas tags ou títulos internos. Dentro da etiqueta de estilo deste arquivo html, adicionamos propriedades de margem e preenchimento para espalhar os títulos uniformemente na página da web. Em seguida, usamos a propriedade de fronteira para ambos os títulos separadamente. Cada borda de 3 pixels sólida foi definida para ambos. O primeiro cabeçalho conterá uma borda de cor verde e o segundo título conterá uma borda de cor azul.

Enquanto as propriedades da fronteira e da borda-esquerda das fronteiras foram definidas como "nenhuma" para os títulos removerem o lado direito e esquerdo da cabeça 1 e de cabeça 2, respectivamente. Vamos salvar e executar esta atualização.

A saída está exibindo dois títulos de bordas verdes e azuis. Enquanto o lado direito da primeira borda e o lado esquerdo da segunda borda é removido. Isso aconteceu por causa do uso de propriedades de borda e borda-direita das fronteiras depois de definir ambos para "nenhum".

Exemplo 02:
Juntamente com a criação de uma borda sólida, você também pode criar um esboço para qualquer elemento específico de uma página da web html sem usar a borda. Contorno e fronteiras são visivelmente parecidas, mas são bem diferentes em propriedades. Vamos usar a propriedade de esboço da linguagem de script html para criar um esboço pontilhado. Usaremos o mesmo arquivo html sem alterar muito de seu script. O mesmo corpo com suas tags e um estilo bastante semelhante foi usado. A única mudança foi feita dentro da etiqueta de estilo, onde estamos definindo o CSS para ambos os títulos.

Aqui, estamos usando a propriedade de esboço para ambos os títulos. O contorno para o 1º título seria de 3 pixels pontilhados em cor azul, enquanto o outro cabeçalho não conterá nenhum cabeçalho de acordo com o valor "nenhum" definido para propriedades de esboço. Vamos salvar e depurar este script HTML para ver os resultados através do código do Visual Studio.

Após a depuração, abrimos a página HTML no navegador Chrome e recebemos o resultado mostrado abaixo. A página HTML de saída está mostrando o primeiro título com um contorno pontilhado e o segundo cabeçalho sem contorno ou borda.

Isso foi sobre a criação de um esboço ao redor dos títulos. Vamos criar contornos tracejados, pontilhados e sólidos para títulos dentro do código HTML. Temos usado um total de 4 parágrafos nesta página da web usando a tag "P" na etiqueta do corpo junto com suas classes específicas que foram especificadas, A, B, C e D. Dentro da tag de estilo, usamos as classes para parágrafos para estilizar separadamente cada parágrafo. A margem da propriedade, o preenchimento e a propriedade de largura são usados ​​com os mesmos valores para todos os três parágrafos. Temos utilizado a propriedade de fronteira para o primeiro parágrafo para criar um parágrafo pontilhado de cor vermelha. A propriedade da fronteira definida como "Nenhum" foi usada para o segundo parágrafo para criar uma fronteira sem borda. A terceira propriedade de fronteira dentro do “P.O parágrafo da classe C ”foi usado para definir a borda de cor de chocolate tracejada de 3 pixels. No último estilo, usamos a propriedade de fronteira para adicionar a borda sólida de 3 pixels de cor roxa em torno do 4º título desta página. Vamos salvar este código e executá -lo para ver os resultados.

A saída deste programa HTML tem mostrado a exibição de um título e 4 parágrafos. O primeiro parágrafo é cercado por uma borda vermelha pontilhada, a segunda não tem borda, a terceira tem uma borda de cor de chocolate tracejada e a última tem uma borda de cor sólida.

Exemplo 03:
Vamos dar uma olhada no nosso último exemplo para remover uma borda do ambiente da mesa. Para isso, usaremos duas tabelas para comparação. Dentro da etiqueta corporal deste arquivo html, usamos duas tags de tabela separadas para criar tabelas. Ambas as tabelas têm as mesmas colunas de cabeçalho e mesmas colunas de dados, 3 colunas e 3 linhas. Estamos atribuindo diferentes "id" a ambas as tabelas para diferenciá -las dentro da tag de estilo.

Dentro da etiqueta de estilo, usamos a mesma margem, preenchimento e propriedade de fronteira para ambas as tabelas. Para a classe “B” da Tabela 2, usamos o conjunto de colapso da fronteira da propriedade para “colapso” para colapsar a fronteira de uma mesa. Vamos salvar e executar este código agora.

A saída para este código HTML está exibindo duas tabelas estáticas. O primeiro é com a borda interna e externa enquanto a segunda tem sua border desabou.

Conclusão:

Este artigo está introduzindo o uso da propriedade de fronteira para remover um ou mais lados das fronteiras em torno de qualquer elemento de uma página da web html. Discutimos como as propriedades de borda, direita-direita, borda e fundo de fronteira podem ser utilizadas para esse fim apenas. Também discutimos o uso de borda e esboço nesses exemplos e discutimos como uma propriedade de colapso da fronteira pode ser usada para a remoção de fronteiras ao redor do elemento da tabela. Adicionamos as ilustrações mais simples para os leitores alcançarem o nível de entendimento.