CSS Border: como estilizar bordas, tipos de bordas e propriedades de border no CSS

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. 

O que é borda CSS? Entenda o CSS border e seus estilos (border-style) 

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. 

Tipos de borda em CSS: estilos padrão da propriedade border-style  

Esses são os estilos de borda padrão utilizados com a propriedade border-style: 

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. 

Como utilizar a propriedade border? 

Veja a seguir algumas maneiras práticas de utilizar a propriedade border: 

Escreva menos código 

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: 

• 1) A ordem dos valores não importa.  
• 2) É possível usar apenas 1 ou 2 valores (ex: 'border: solid' ou 'border: 2px dotted').  
• 3) O único valor obrigatório para visualizar a borda é o border-style. 

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: 

• border-top: Aplica borda na parte superior de um elemento. 
• border-left: Aplica borda no lado esquerdo de um elemento. 
• border-right: Aplica borda no lado direito de um elemento. 
• border-bottom: Aplica borda na parte inferior de um elemento. 

Como usar imagens como borda no CSS (border-image) 

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. 

Outras propriedades para bordas CSS: border-radius, box-shadow, hover e borda interna CSS 

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 */ 
}

Qual o próximo passo?

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.