A borda é uma das propriedades fantásticas do CSS usado para especificar o limite do elemento. CSS permite que os desenvolvedores adicionem fronteiras ao redor do elemento com a ajuda do “fronteira" propriedade. Além disso, os usuários podem aplicar mais de uma borda ao redor do elemento com as mesmas cores e cores diferentes usando “:antes" e ":depoisSeletores CSS.

Este tutorial ensinará você a aplicar a fronteira dupla com cores diferentes, utilizando as propriedades do CSS.

Como aplicar uma borda dupla com cores diferentes no CSS?

Para aplicar a borda dupla com cores diferentes, confira as instruções fornecidas.

Etapa 1: Insira o cabeçalho

Inicialmente, insira uma tag de cabeçalho usando o “

" marcação. Esta tag é usada para especificar o título do nível um.

Etapa 2: Crie um contêiner div

Em seguida, crie um contêiner div com a ajuda do “" marcação. Dentro da tag div, adicione uma classe “duplo-border”.

Etapa 3: Adicione texto no parágrafo

Então, utilize o “

”Elemento e atribui uma classe“fronteira”. Depois disso, incorpore o texto entre os “

Linuxhint Ltd UK

Linuxhint fornece o conteúdo para várias categorias, incluindo Docker, HTML/CSS, Discord, PowerShell, Windows, Github e muito mais.

Pode -se observar que o texto no parágrafo foi adicionado com sucesso:

Etapa 4: Acesse o elemento “div”

Agora, acesse o contêiner "div" com a ajuda da classe atribuída ".duplo-border”.

Etapa 5: adicione uma única borda

Para adicionar uma única borda, aplique as propriedades especificadas:

.duplo-border
Posição: relativa;
Background-Color: RGB (59, 194, 247);
borda: 4px RGB sólido (255, 113, 113);
preenchimento: 1em;
margem: 0 automático;
Altura: 10em;
largura: 14em;

No bloco de código fornecido:

• ““posição”Especifica a posição do elemento. Por exemplo, definimos o “relativo“Posição para posicioná -lo em relação à sua posição normal.
• ““cor de fundo”Propriedade utilizada para definir a cor dos elementos da parte traseira.
• ““fronteira”É usado para alocar um limite ao redor do elemento.
• ““preenchimento”Especifica um espaço em torno do conteúdo do elemento.
• ““margem”Aloca espaço em branco ao redor do limite do elemento definido.
• ““altura”Define a altura do elemento.
• ““largura”Especifica para definir o tamanho da largura do elemento.

Como resultado, a fronteira será adicionada assim:

Etapa 6: Adicione a borda dupla

Agora, acesse a classe com a ajuda do nome da classe junto com o “:antes”Seletor. Depois disso, aplique as seguintes propriedades:

.duplo-border: antes de
Antecedentes: Nenhum;
fronteira: 4px RGB sólido (19, 18, 18);
contente: "";
exibição: bloco;
Posição: Absoluto;
topo: 5px;
Esquerda: 5px;
Direita: 5px;
Inferior: 5px;

A descrição das propriedades acima codificadas é a seguinte:

• ““fronteira”A propriedade é utilizada aqui para inserir outra fronteira ao redor do elemento. Aqui o "rgb”O valor atribui uma cor diferente à fronteira.
• O "contente”A propriedade é utilizada com o“:antes" e ": depoisr ”pseudo-elementos para inserir os materiais criados.
• ““mostrar”Determina a aparência de um elemento.
• Aqui, "posição"É definido como"absoluto”, O que significa que a posição é fixa ou absoluta.
• ““principal”Propriedade define a posição superior do elemento.
• ““esquerda”Especifica a posição do elemento no lado esquerdo.
• ““certo”É usado para especificar a posição correta de um elemento.
• ““fundo”É usado para especificar a posição inferior de um elemento:

Pode -se observar que adicionamos com sucesso a borda dupla ao redor do elemento.

Conclusão

Para aplicar a fronteira dupla com cores diferentes no CSS, primeiro, crie um contêiner de div e atribua uma classe “Bordro-Border”. Em seguida, acesse o elemento por classe e aplique propriedades CSS, incluindo “fronteira","posição" como "relativo" e outros. Em seguida, acesse novamente o elemento por nome de classe junto com o “:antes"Seletor e aplique o"fronteira”Propriedade com a posição como“absoluto”. Este post ensinou o método para aplicar bordas duplas com cores diferentes no CSS.