As bordas são cruciais no design/desenvolvimento da web, pois podem chamar a atenção para os usuários ou separar o conteúdo em uma página da web. Você pode usar a abreviação de borda quando quiser que todas as quatro bordas em um elemento HTML sejam iguais.
Por outro lado, você também pode usar as propriedades de cor da borda, estilo da borda e largura da borda à mão para tornar cada borda diferente/única. Quando você deseja especificar a cor da borda, usamos a cor da borda, usamos a largura da borda para determinar a largura da borda e especificamos se uma borda será tracejada, dupla ou sólida usando a propriedade border-style.
Você também pode direcionar bordas individuais usando propriedades como início do bloco de borda e borda superior
Uma borda dupla é quando duas linhas paralelas cercam um elemento HTML. As duas linhas são separadas por uma lacuna que pode ser deixada transparente ou preenchida com uma imagem ou uma cor de fundo.
Por exemplo, podemos ter um botão de inscrição/login cercado por uma borda dupla.
últimas postagens
Por que borda dupla?
- Separação: você pode usar uma borda dupla para aumentar a legibilidade e a capacidade de digitalização de uma página da Web, separando diferentes elementos HTML. Por exemplo, você pode ter bordas duplas para separar elementos como cabeçalhos, corpo e rodapés em uma página da web.
- Apelo visual: Você pode usar cores diferentes/contrastantes nas bordas duplas para tornar os diferentes elementos visualmente mais atraentes.
- Mostrar hierarquia: você pode distinguir claramente entre os elementos importantes e menos importantes em uma página da Web usando bordas duplas.
- Fácil personalização: você pode criar designs personalizados e exclusivos com a ajuda de bordas duplas. Por exemplo, você pode alterar a cor ou a largura de cada linha.
- Ênfase: Usando a propriedade de borda dupla, você pode chamar a atenção para links ou botões específicos em uma página da web.
Você pode usar as seguintes maneiras de criar a borda dupla em CSS.
Usando propriedade de estilo de borda
A propriedade border-style define o estilo das quatro bordas de um elemento. Usamos a palavra-chave double para definir o estilo neste caso. Quando usamos a palavra-chave double, o preenchimento automático é criado entre as duas bordas.
Para fins de demonstração, definiremos a largura da borda para 15px. Também escolheremos a cor da borda para ser vermelha e indicaremos o estilo da borda como duplo.
Código HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2> Border Property</h2> </div> </body> </html>
Código CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border-width: 15px;
border-color: red;
border-style: double;
}
A saída será:
Usando a função linear-gradient ()
Esta função define um gradiente linear como imagem de fundo. O resultado é uma transição gradual entre duas cores ao longo de uma linha reta. Usamos a palavra-chave to para marcar o ponto inicial da linha de gradiente. Se a ordem não for especificada, o valor padrão será inferior.
O código abaixo dá à nossa caixa uma largura de borda de 7px. Podemos então especificar o gradiente linear na propriedade background de cada lado da caixa.
Código HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>linear-gradient() function</h2> </div> </body> </html>
Código CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 350px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 7px solid rgb(36, 85, 7);
background: linear-gradient(to top, #8f0404 7px, transparent 1px),
linear-gradient(to bottom, #8f0404 7px, transparent 1px),
linear-gradient(to left, #8f0404 7px, transparent 1px),
linear-gradient(to right, #8f0404 7px, transparent 1px);
}
A saída será:
Usando propriedade de contorno
Um contorno é uma linha desenhada fora da borda de um elemento. Isso atinge o efeito de borda dupla e podemos usar um contorno e uma borda única. Devemos usar o deslocamento do contorno para adicionar um espaço entre as propriedades da borda e do contorno.
Código HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>Outline Property</h2> </div> </body> </html>
Código CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 5px solid red;
outline: 5px solid blue;
outline-offset: -20px;
}
A página renderizada aparecerá da seguinte forma:
Usando a propriedade box-shadow
A propriedade box-shadow adiciona um efeito de sombra ao redor da moldura de um elemento. Você pode ter vários efeitos de sombra de caixa separados por vírgulas. Comece garantindo que as configurações de deslocamento e desfoque sejam zero e, em seguida, defina as sombras nos tamanhos adequados.
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>Box Shadow Property</h2> </div> </body> </html>
Código CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
box-shadow:
0 0 0 5px red,
0 0 0 10px green;
}
A página renderizada aparecerá da seguinte forma:
Usando a propriedade background-clip
A propriedade background-clip determina até que ponto o plano de fundo deve se estender dentro de um elemento. A extensão pode estar na caixa de borda, caixa de preenchimento ou caixa de conteúdo.
Código HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>Background-Clip Property</h2> </div> </body> </html>
Código CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 7px solid rgb(36, 85, 7);
padding: 5px;
background-clip: content-box;
background-color: rgb(238, 152, 130);
}
A página renderizada aparecerá da seguinte forma:
Usando pseudoelementos
Pseudo-elementos, representados pelos seletores ::before e ::after, permitem que os web designers estilizem partes de um documento HTML sem adicionar marcações ao código.
Podemos ilustrar como usar pseudo-elementos para criar uma borda dupla usando este código:
documento HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>pseudo property</h2> </div> </body> </html>
CSS
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 150px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
background-color: brown;
}
box{
background-color: rebeccapurple;
position: relative;
border: 8px solid red;
}
.box::before{
content: " ";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border: 8px solid green;
border-width: 6px;
border-color: green white green white;
width: 150px;
height: 100px;
}
A página renderizada aparecerá da seguinte forma:
Exemplos do mundo real de CSS de borda dupla
A propriedade CSS de borda dupla é usada em muitos sites. Você deve combinar a propriedade double border com outras propriedades CSS para tirar o melhor proveito dela. A seguir estão dois exemplos da borda dupla em ação;
O botão “Carrinho” na Amazon
A Amazon é um dos maiores nomes no espaço de e-commerce. Seu botão de carrinho possui um CSS de borda dupla para estética visual e solicita que os usuários ajam.
As bordas duplas aparecem quando um usuário passa o mouse sobre o botão ‘carrinho’. As bordas também ficam visíveis quando você passa o mouse sobre o menu de navegação da Amazon.
Botões do Mailchimp
O Mailchimp é um serviço de email marketing que permite aos usuários criar, lançar e rastrear campanhas. Seu site usa efeitos de borda dupla em várias seções. Os botões de inscrição e login têm bordas duplas para “criar” um senso de urgência à medida que os usuários navegam.
A borda na parte inferior desses botões aumenta conforme o usuário passa o cursor por eles.
Práticas recomendadas ao usar o efeito CSS de borda dupla
É fácil se deixar levar quando você está usando CSS duplo. O objetivo final é garantir que os usuários naveguem facilmente e enfatizem as principais áreas do seu site. Siga estas práticas recomendadas:
- Use um estilo consistente: se você usar bordas duplas, certifique-se de que o estilo seja consistente em todos os elementos. Por exemplo, bordas duplas podem ser usadas nos botões de navegação, call-to-action e de inscrição/login. Se possível, certifique-se de ter as mesmas cores e espessuras de margem nos elementos com bordas duplas.
- Certifique-se de que essas fronteiras duplas funcionem em diferentes dispositivos: vivemos em um mundo onde as pessoas navegam em sites de smartphones, PCs e tablets. Teste para garantir que as bordas duplas sejam exibidas conforme o esperado em vários tamanhos de tela.
- Use-os com moderação: você pode ficar tentado a usar um determinado efeito CSS depois de descobri-lo pela primeira vez. No entanto, CSS duplo se adapta a vários elementos em uma página da web. Use esta propriedade apenas em áreas onde ela agrega valor ao design.
Conclusão
Destacamos as principais abordagens que você pode usar para criar uma borda dupla em CSS. A escolha da abordagem dependerá do que você deseja alcançar com a borda dupla e de suas preferências. Você pode optar por manter um ou uma combinação de vários estilos de borda dupla na mesma página.
Você pode conferir esses recursos CSS para entender as folhas de estilo em cascata em detalhes.