6 minutos de leitura
Autor(a)
Sou Luan Alves, estudante de Análise e Desenvolvimento de Sistemas, instrutor de Desenvolvimento Front-End no Grupo Alura. Estou aqui para ajudar a tirar suas dúvidas, aprender e compartilhar conhecimento. :)
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
No CSS, o espaço que um elemento ocupa é separado em `margin`, `padding` e borda (border). Neste artigo, vamos explicar como colocar borda no CSS, quais os tipos de borda CSS disponíveis, como customizar estilos de borda, cor da borda, espessura da borda e onde usar cada tipo de border.
Ao inserir um elemento em um documento HTML, existem várias possibilidades de estilizar sua borda.
Você pode utilizar diferentes estilos de borda, além de alterar cor, espessura e até mesmo o formato das bordas.
Tudo isso utilizando apenas o poder do CSS. Caso queira, também é possivel aplicar na borda de algum elemento uma imagem interessante que você encontrou no Google.
Inicialmente, é importante saber que a propriedade `border-style` do CSS, ou CSS border styles, é utilizada para definir o estilo da borda de um elemento HTML.
Cada estilo especifica um visual diferente para a borda. Ao escolher o estilo de borda mais adequado, você pode personalizar a apresentação visual do seu conteúdo.
Esses são os estilos de borda padrão utilizados com a propriedade `border-style`:
Avalie este artigo
Além dos estilos apresentados, também existem os valores none e hidden, que não exibem bordas visíveis, mas ainda fazem parte da especificação do CSS.
Por exemplo, ao utilizar `border-style` : `none` ; em um elemento como:
``` <div style="border: 2px none blue;">Exemplo none</div>
```Neste caso, nenhuma borda será renderizada, mesmo que largura e cor estejam definidas.
Já o valor `hidden`, como em:
``` <div style="border: 2px hidden blue;">Exemplo hidden</div>
```Já neste, funciona de forma semelhante ao none na maioria dos casos, porém possui um comportamento específico em tabelas, onde pode sobrescrever outras bordas adjacentes. Ambos são úteis quando se deseja controlar a exibição das bordas sem remover completamente a propriedade border do elemento.
Veja a seguir algumas maneiras práticas de utilizar a propriedade `border`:
Utilizando apenas a propriedade `border`, é possível aplicar três valores:
border: 30px solid blue; Segundo a documentação MDN, esses três valores podem vir em qualquer ordem: border-width, border-style e border-color. Então vale ressaltar que:
O exemplo acima é equivalente a utilizar as três propriedades separadamente, como mostrado abaixo:
border-width: 30px; /* Estiliza a sua largura */
border-style: solid; /* Estiliza seu estilo */
border-color: blue; /* Estiliza sua cor */Personalizando bordas: como colocar borda em apenas um lado do elemento
Para realizar isso, devemos utilizar apenas a propriedade border-top. Veja a seguir o HTML da borda da imagem acima.
border-top: 30px solid blue;
background-color: rgb(150, 215, 255);Existem propriedades específicas para cada lado do elemento HTML:
A propriedade `border-image` permite aplicar imagens nas bordas de um elemento.
border: 30px solid transparent;
font-size: 40px;
background-color: rgb(150, 215, 255);
border-image: url("./132d0b11f96dcffaa700966900312a52.jpg") 150 round;Ao utilizar a propriedade `border-image`, é necessário aplicar também a propriedade `border` antes, junto de pelo menos o valor `border-style`. Recomenda-se usar `border-style: solid` e definir a largura da borda com `border-width` ou diretamente no shorthand `border`.
Quando border-image é aplicada, ela substitui o border-style visualmente, mas o border-style ainda precisa estar definido (normalmente como 'solid' ou 'transparent').
O valor de color também será sobreposto pela imagem. A largura definida em border-width determina o espaço disponível para a imagem da borda.
A propriedade `border-radius` permite arredondar os cantos das bordas de um elemento.
border: 30px solid blue;
border-radius: 20px;• `box-shadow`:
A propriedade `box-shadow` permite aplicar sombras em elementos, criando um efeito de profundidade.
box-shadow: 10px 20px 0 0 grey;
/* Sintaxe completa:
box-shadow: offset-x offset-y blur-radius spread-radius color;
Neste exemplo: 10px horizontal, 20px vertical, sem blur, sem spread, cor grey */Repare que a sintaxe completa de box-shadow aceita 2 a 4 valores de comprimento mais a cor: offset-x, offset-y, blur-radius (opcional) e spread-radius (opcional). Para fins didáticos, é interessante que você veja todos os valores possíveis.
Também é possível utilizar o seletor `:hover` para alterar ou adicionar estilos a um elemento quando o cursor do mouse passa sobre ele.
Para utilizar o `hover`, você pode seguir o código abaixo. Perceba que utilizamos a propriedade `transition`. Ela serve para aplicar um tempo de transição na mudança de estilo.
.elemento-referenciado {
border: 30px solid blue;
background-color: rgb(150, 215, 255);
font-size: 40px;
cursor: pointer;transition: all 1s; /* Define a transição para todas as propriedades que mudarem */
}
.elemento-referenciado:hover {
/* Estilos que mudam ao passar o cursor no elemento */
border: 30px solid red; /* Exemplo: mudança de cor da borda */
background-color: rgb(100, 180, 255); /* Exemplo: mudança de cor de fundo */
/* A propriedade transition não precisa ser redefinida aqui */
}Neste artigo, você aprendeu diferentes formas de estilizar bordas em elementos usando CSS. Agora, já pode criar bordas variadas para seus projetos.
Se você quer ir além da sintaxe e entender como o uso de bordas impacta de verdade o layout, especialmente em cenários reais e até no uso com ferramentas de IA, vale a pena conferir o artigo CSS border: o que você realmente precisa saber antes de pedir para o agente fazer.
Nele, a discussão sai do básico e entra em decisões práticas, como evitar que uma simples borda quebre seu layout, quando usar `box-sizing: border-box` e até como escrever instruções mais inteligentes para agentes gerarem CSS com menos erros.
Caso queira aprender mais sobre HTML, CSS e JavaScript, recomendo as Carreiras de Desenvolvimento Front-end da Alura, na qual você vai desenvolver diferentes projetos com design moderno e conteúdo atualizado.
SEO: como adicionar meta-tags no Next.js?
Ler mais
Como o Next.js ajuda no SEO das SPAs?
Ler mais
JavaScript replace: manipulando Strings e regex
Ler mais