Como Criar Bordas Arredondadas com CSS

1. O Que é border-radius?

A propriedade border-radius no CSS permite definir o quão arredondadas serão as bordas de um elemento. Você pode aplicá-la em qualquer elemento com bordas visíveis, como caixas de texto, divs, imagens e botões. Ela aceita valores em pixels, porcentagens e outras unidades, e pode ser ajustada para cada canto individualmente.

Exemplo Básico

div {
    border: 2px solid #000;
    border-radius: 15px;
}

No exemplo acima, aplicamos um arredondamento de 15 pixels em todas as bordas da div. O resultado será uma caixa com bordas suavemente arredondadas.

2. Aplicando Bordas Arredondadas Uniformemente

O valor mais comum usado com border-radius é o arredondamento uniforme, onde todos os cantos têm o mesmo raio. Isso cria uma curva suave e simétrica em cada borda do elemento.

Exemplo

button {
    background-color: #007bff;
    color: white;
    border-radius: 10px;
}

Nesse exemplo, o botão terá cantos suavemente arredondados em todas as direções. Esse tipo de efeito é amplamente usado para criar botões mais amigáveis e acessíveis.

3. Bordas Arredondadas por Canto

Você também pode arredondar cantos específicos de um elemento aplicando valores individuais para cada canto, como border-top-left-radius, border-top-right-radius, border-bottom-left-radius e border-bottom-right-radius.

Exemplo de Código

div {
    border: 2px solid #000;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 50px;
}

Com este código, a div terá um canto superior esquerdo levemente arredondado e um canto inferior direito muito mais arredondado, criando um efeito visual assimétrico.

4. Bordas Arredondadas com Porcentagem

Ao usar valores percentuais no border-radius, você pode criar efeitos interessantes. Por exemplo, ao definir o valor como 50%, você pode transformar uma imagem quadrada em um círculo perfeito.

Exemplo com Imagem Circular

img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

Essa técnica é amplamente utilizada para criar avatares redondos em sites de perfis ou redes sociais.

5. Definindo Valores Diferentes para Cada Canto

Você pode definir diferentes valores para cada canto usando a sintaxe encurtada da propriedade border-radius. Os valores são aplicados no sentido horário, começando pelo canto superior esquerdo.

Exemplo

div {
    border: 2px solid #000;
    border-radius: 10px 20px 30px 40px;
}

Esse código aplica diferentes raios para cada canto da div, criando um efeito visual único.

Conclusão

A propriedade border-radius é uma ferramenta poderosa no arsenal de qualquer desenvolvedor ou designer web. Com ela, você pode criar bordas arredondadas de forma simples e eficaz, melhorando a estética do seu site. Seja criando elementos perfeitamente circulares ou aplicando arredondamentos sutis para suavizar o design, o border-radius oferece flexibilidade para alcançar o resultado desejado.

Experimente as diferentes abordagens e veja como as bordas arredondadas podem transformar a aparência dos seus elementos visuais!