As margens são elementos essenciais no design e desenvolvimento web, usadas para direcionar o olhar do usuário ou para segmentar o conteúdo em páginas da internet. A opção abreviada de borda é útil quando se deseja que todas as quatro margens de um elemento HTML sejam idênticas.
Por outro lado, pode-se usar as propriedades de cor, estilo e largura de borda individualmente para criar margens diferenciadas e personalizadas. Para definir a cor da borda, usamos a propriedade `border-color`; para a espessura, `border-width`; e para definir se a margem será tracejada, dupla ou contínua, utilizamos `border-style`.
É possível também especificar margens individuais utilizando propriedades como `border-block-start` e `border-top`.
Uma borda dupla é caracterizada por duas linhas paralelas que envolvem um elemento HTML. Essas linhas são separadas por um espaço que pode ser transparente ou preenchido com uma imagem ou cor de fundo.
Por exemplo, um botão de inscrição ou login pode ser destacado com uma borda dupla.
Por que utilizar bordas duplas?
- Separação: Bordas duplas melhoram a legibilidade e a escaneabilidade de uma página, separando elementos HTML distintos. Por exemplo, elas podem dividir seções como cabeçalhos, corpo e rodapés.
- Apelo visual: O uso de cores contrastantes em bordas duplas pode tornar os elementos mais atraentes visualmente.
- Hierarquia: Bordas duplas ajudam a diferenciar elementos importantes de outros menos relevantes em uma página web.
- Personalização: É possível criar designs únicos e personalizados ajustando a cor ou a espessura de cada linha da borda dupla.
- Ênfase: A propriedade de borda dupla destaca links ou botões específicos na página.
Existem diversas formas de criar bordas duplas em CSS.
Usando a propriedade `border-style`
A propriedade `border-style` define o estilo de todas as quatro margens de um elemento. A palavra-chave `double` define o estilo como borda dupla, criando automaticamente um espaço entre as duas linhas.
Para exemplificar, vamos definir a largura da borda como 15px, a cor como vermelha e o estilo como `double`.
Código HTML:
<html lang="pt-BR"> <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>Exemplo de Borda Dupla</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>Borda com `border-style`</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;
}
Resultado:
Usando a função `linear-gradient()`
Essa função cria um gradiente linear como imagem de fundo, resultando em uma transição gradual entre duas cores ao longo de uma linha reta. A palavra-chave `to` define o ponto inicial do gradiente. Se a ordem não for especificada, o valor padrão é de cima para baixo.
No código abaixo, definimos a largura da borda da caixa como 7px e utilizamos a propriedade `background` para aplicar o gradiente linear em cada lado da caixa.
Código HTML:
<html lang="pt-BR"> <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>Exemplo de Borda Dupla com Gradiente</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>Borda com `linear-gradient()`</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);
}
Resultado:
Usando a propriedade `outline`
Um contorno é uma linha desenhada fora da borda de um elemento. Podemos criar um efeito de borda dupla combinando um contorno com uma borda única. Utilizamos `outline-offset` para criar espaço entre a borda e o contorno.
Código HTML:
<html lang="pt-BR"> <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>Exemplo de Borda Dupla com Contorno</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>Borda com `outline`</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 aparece da seguinte forma:
Usando a propriedade `box-shadow`
A propriedade `box-shadow` adiciona um efeito de sombra ao redor da moldura de um elemento. É possível aplicar múltiplos efeitos de sombra separados por vírgulas. Começamos definindo os deslocamentos e o desfoque como zero e então ajustamos os tamanhos das sombras.
HTML:
<html lang="pt-BR"> <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>Exemplo de Borda Dupla com Sombra</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>Borda com `box-shadow`</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 aparece da seguinte forma:
Usando a propriedade `background-clip`
A propriedade `background-clip` define até onde o plano de fundo deve se estender dentro de um elemento, podendo ser até a caixa de borda, a caixa de preenchimento ou a caixa de conteúdo.
Código HTML:
<html lang="pt-BR"> <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>Exemplo de Borda Dupla com `background-clip`</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>Borda com `background-clip`</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 aparece da seguinte forma:
Usando pseudo-elementos
Pseudo-elementos, como os seletores `::before` e `::after`, permitem que designers web estilizem partes de um documento HTML sem adicionar marcação ao código.
O código abaixo demonstra como usar pseudo-elementos para criar uma borda dupla:
Documento HTML
<html lang="pt-BR"> <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>Exemplo de Borda Dupla com Pseudo-elementos</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>Borda com Pseudo-elementos</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 aparece da seguinte forma:
Exemplos reais de CSS de borda dupla
A propriedade CSS de borda dupla é comum em vários sites. Para obter o melhor resultado, combine-a com outras propriedades CSS. Abaixo, dois exemplos de borda dupla em ação:
O botão “Carrinho” na Amazon
A Amazon é um dos maiores players no e-commerce. Seu botão de carrinho utiliza CSS de borda dupla para fins estéticos e para incentivar a ação dos usuários.
As bordas duplas aparecem quando o usuário passa o mouse sobre o botão ‘carrinho’. As bordas também se tornam visíveis ao passar o mouse sobre o menu de navegação da Amazon.
Botões do Mailchimp
O Mailchimp é uma ferramenta de email marketing que permite 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 possuem bordas duplas para criar uma sensação de urgência durante a navegação.
A borda na parte inferior desses botões aumenta ao passar o cursor por cima deles.
Boas práticas ao usar o efeito CSS de borda dupla
É fácil exagerar ao usar bordas duplas. O objetivo principal é garantir que os usuários naveguem facilmente e que as áreas principais do seu site sejam enfatizadas. Siga estas práticas recomendadas:
- Mantenha a consistência: Se usar bordas duplas, garanta que o estilo seja consistente em todos os elementos. Por exemplo, aplique bordas duplas em botões de navegação, chamadas para ação e botões de inscrição/login. Mantenha as mesmas cores e espessuras de margem nos elementos com bordas duplas.
- Compatibilidade com dispositivos: Certifique-se de que as bordas duplas funcionem em smartphones, PCs e tablets. Teste em vários tamanhos de tela para garantir a exibição correta.
- Use com moderação: Não se deixe levar pelo entusiasmo ao descobrir um novo efeito CSS. O CSS de borda dupla pode ser utilizado em vários elementos de uma página, mas use esta propriedade apenas em áreas que realmente agreguem valor ao design.
Conclusão
Este artigo abordou as principais formas de criar bordas duplas em CSS. A melhor abordagem depende do objetivo desejado e das preferências de cada designer. É possível manter um único estilo de borda dupla ou combinar diferentes estilos na mesma página.
Para uma compreensão mais profunda de folhas de estilo em cascata, consulte outros recursos CSS disponíveis.