Adicionando Bordas e Sombras com CSS
Aprenda a usar border, border-radius para bordas arredondadas, e box-shadow para adicionar sombras a elementos em CSS. Este guia oferece exemplos práticos e de fácil entendimento para melhorar o design de suas páginas web.
Introdução
Bordas e sombras são elementos essenciais para o design de qualquer página web. Eles ajudam a destacar conteúdos, adicionar profundidade e criar uma estética agradável. Neste artigo, vamos explorar como usar as propriedades CSS border, border-radius e box-shadow para adicionar bordas e sombras a seus elementos.
Usando border
A propriedade border é usada para adicionar bordas ao redor de um elemento. Você pode definir a largura, o estilo e a cor da borda.
Exemplo:
div {
border: 2px solid #000;
}
Neste exemplo, o elemento <div> terá uma borda de 2 pixels de largura, sólida e preta.
Definindo Bordas Individualmente
Você também pode definir bordas individualmente para cada lado do elemento:
div {
border-top: 2px solid #000;
border-right: 2px dashed #333;
border-bottom: 2px dotted #666;
border-left: 2px double #999;
}
Aqui, cada lado do <div> terá um estilo de borda diferente.
Usando border-radius
A propriedade border-radius é usada para criar bordas arredondadas. Você pode definir um raio único para todas as bordas ou valores específicos para cada canto.
Exemplo:
div {
border: 2px solid #000;
border-radius: 10px;
}
Neste exemplo, o elemento <div> terá bordas arredondadas com um raio de 10 pixels.
Bordas Arredondadas Individualmente
Você pode especificar raios diferentes para cada canto:
div {
border: 2px solid #000;
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;
}
Aqui, cada canto do <div> terá um raio de curvatura diferente.
Usando box-shadow
A propriedade box-shadow adiciona sombras a um elemento, criando um efeito de profundidade. Você pode definir o deslocamento horizontal e vertical, o desfoque, a dispersão e a cor da sombra.
Exemplo:
div {
border: 2px solid #000;
border-radius: 10px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}
Neste exemplo, o <div> terá uma sombra deslocada 5 pixels para a direita e para baixo, com um desfoque de 15 pixels e cor preta semi-transparente.
Sombras Internas
Você também pode adicionar sombras internas usando a palavra-chave inset:
div {
border: 2px solid #000;
border-radius: 10px;
box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.3);
}
Aqui, a sombra será desenhada dentro do <div>.
Exemplo Prático Completo
Vamos combinar todas essas propriedades em um exemplo completo.
CSS:
.container {
width: 300px;
height: 200px;
margin: 50px auto;
background-color: #fff;
border: 2px solid #000;
border-radius: 15px;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
}
HTML:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo de Bordas e Sombras</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<p>Este é um exemplo de como usar bordas e sombras em CSS.</p>
</div>
</body>
</html>
Neste exemplo, o elemento container terá um fundo branco, uma borda preta de 2 pixels, cantos arredondados com um raio de 15 pixels, e uma sombra com deslocamento de 10 pixels, desfoque de 20 pixels e cor preta semi-transparente.
Conclusão
Adicionando bordas e sombras com CSS, você pode criar efeitos visuais atraentes e destacar elementos em suas páginas web. Usando border, border-radius e box-shadow, você pode controlar a aparência de bordas e sombras de forma flexível e precisa. Experimente essas propriedades para ver como elas podem melhorar o design do seu site.
💡 Gostou do conteúdo?
✅ Apoie-nos: Siga, Curta, Comente e Compartilhe!
📲 Conecte-se com o WebMundi:
▶️ YouTube
▶️ Facebook
▶️ Instagram
▶️ LinkedIn
▶️ TikTok
👥 Participe do nosso Discord para tirar dúvidas e ajudar outras pessoas!
