📘 Aula 25 MD-2: Caixas com vértices arredondados 📘

📘 Introdução

Nesta aula, vamos aprender sobre como arredondar os cantos de caixas e elementos em HTML usando CSS. A propriedade principal utilizada é border-radius. Ela é muito útil para deixar os layouts mais modernos, suaves e visualmente agradáveis.

Podemos aplicar bordas arredondadas em divs, sections, articles, imagens, botões e praticamente qualquer elemento em bloco.

⚙️ Sintaxe do border-radius

A forma mais simples de usar border-radius é definindo um valor único que se aplica a todos os cantos:

elemento {
    border-radius: 20px;
}

Também podemos definir valores individuais para cada canto, na ordem:

elemento {
    border-radius: topo-esquerdo topo-direito 
                   baixo-direito baixo-esquerdo;
}
            

Exemplos de valores individuais:

• 10px 20px 30px 40px → Cantos com arredondamentos diferentes

• 50% → Torna elementos quadrados em círculos perfeitos

🎨 Exemplos Práticos

1️⃣ Caixa arredondada padrão:

div#exemplo-arredondado {
    width: 200px;
    height: 100px;
    background-color: cadetblue;
    border-radius: 20px;
}
            

2️⃣ Caixa circular:

div#exemplo-circulo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: darkcyan;
}
            

3️⃣ Vértices diferentes:

div#exemplo-variado {
    width: 250px;
    height: 120px;
    border-radius: 10px 30px 50px 70px;
    background-color: darkorange;
}
            

💡 Dicas Importantes

- Use border-radius em imagens para criar avatares ou botões arredondados. - Experimente porcentagens para formas circulares ou elípticas. - Combine com box-shadow para dar profundidade às caixas. - Lembre-se de que border-radius funciona melhor em elementos com dimensões definidas.

🧠 Conclusão

O border-radius é uma ferramenta poderosa e simples para deixar seus layouts mais suaves e modernos. Com ele, você pode criar desde cantos levemente arredondados até círculos perfeitos e formas complexas combinadas com sombras e cores.

Extra: Bordas Decoradas

Nesta seção você verá um exemplo prático de como aplicar bordas decoradas usando a propriedade border-image em seus títulos e elementos. O vídeo abaixo demonstra o passo a passo da técnica e suas possibilidades criativas.

Dica: Experimente variar a imagem da borda e os valores de border-image-slice para obter efeitos únicos em seu layout.