1. Vértices Arredondados (border-radius)

Controla o arredondamento dos cantos da borda:

• border-radius: 10px; (todos os cantos igualmente)
• border-radius: 10px 5px 15px 20px; (top-left, top-right, bottom-right, bottom-left)
• Valores em porcentagem criam formas elípticas: border-radius: 50%; (círculo perfeito se elemento quadrado)

Dica: Use overflow: hidden; junto com border-radius para cortar conteúdo interno.

2. Bordas com Imagens Personalizadas (border-image)

Cria bordas usando imagens. Propriedades principais:

• border-image-source: url('imagem.png'); (define a imagem)
• border-image-slice: 30; (divide a imagem em 9 regiões)
• border-image-width: 20px; (largura da borda)
• border-image-repeat: stretch|repeat|round; (como a imagem se repete)

Exemplo prático com gradiente:

border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4) 1;

Atenção: Funciona melhor com elementos que tenham borda definida (border-width).

Combinação de Efeitos

Exemplo de card moderno:

                    
.card {

border-radius: 15px 5px;

border: 2px solid;

border-image: linear-gradient(to right, #ff6b6b, #4ecdc4) 1;

box-shadow: 3px 3px 10px rgba(0,0,0,0.1);

}
                        
                

Boas Práticas

• Para border-radius: Use valores consistentes no design (ex: 4px, 8px, 16px)
• Para border-image: Prefira SVG para bordas complexas (melhor escalabilidade)
• Teste em vários navegadores - algumas propriedades precisam de prefixos (-webkit-)