Artigos CSS CSS: border-radius

Antes das CSS3, criar bordas arredondadas em elementos HTML era uma tarefa pouco intuitiva e custosa, pois normalmente era necessário utilizar uma ou mais imagens para obter essa característica. Com o recurso border-radius da versão mais recente das CSS, tornou-se mais fácil obter esse resultado, bastando atribuir um valor numérico para essa propriedade, da mesma forma como é feita para outros atributos como border-width e border-color.

Sintaxe

Para tornar a borda de um elemento arredondada, devemos atribuir um valor à propriedade border-radius utilizando uma das estruturas apresentadas na Listagem 1.


    01 border-radius: valor;
    02 border-radius: valor1 valor2;
    03 border-radius: valor1 valor2 valor3 valor4
    04 border-top-left-radius: valor;
    05 border-top-right-radius: valor;
    06 border-bottom-left-radius: valor;
    07 border-bottom-right-radius: valor;
Listagem 1. Sintaxe da propriedade border-radius

Linha 1: Dessa forma o mesmo valor é aplicado a todos os vértices (pontas) do objeto, obtendo assim uma aparência homogênea em todas as bordas;

Linha 2: Na segunda forma o valor1 é aplicado às extremidades superior esquerda e inferior direita, enquanto o valor2 é aplicado aos vértices superior direito e inferior esquerdo;

Linha 3: Nessa terceira forma o valor1 corresponde ao ponto superior esquerdo, o valor2 ao ponto superior direito, o valor3 ao ponto inferior direito e o valor4 ao ponto inferior esquerdo.

Linhas 4 a 7: Aqui estamos atribuindo os valores específicos de cada vértice;

Exemplo

A fim de ilustrar o funcionamento dessa propriedade, vamos tomar como exemplo o código da Listagem 2.


01 <!DOCTYPE html>
02 <html>
03 <head>
04     <meta charset="UTF-8">
05     <title>Border Radius CSS3</title>
06     <style>
07         div {
08             width: 100px;
09             height: 100px;
10             border-width: 2px;
11             border-color: black;
12             border-style: solid;
13             display: inline-block
14         }
15         #caixa1 {
16             border-radius: 20px;
17         }
18         #caixa2 {
19             border-radius: 30px 10px;
20         }
21         #caixa3 {
22             border-radius: 5px 10px 20px 30px;
23         }
24     </style>
25 </head>
26 <body>
27     <div id="caixa1"></div>
28     <div id="caixa2"></div>
29     <div id="caixa3"></div>
30 </body>
31 </html>
Listagem 2. Exemplo de uso do border-radius

Linhas 7 a 14: configuramos a aparência básica de todas as divs do exemplo (dimensões e borda);

Linhas 15 a 17: configuramos a primeira div para apresentar a borda arredondada com 20px em todas as extremidades;

Linhas 18 a 20: configuramos a segunda div para apresentar a borda arredondada com 30px nas extremidades superior esquerda e inferior direita, e 10px nos cantos superior direito e inferior esquerdo;

Linhas 21 a 23: configuramos a terceira div para apresentar borda arredondada com 5px no canto superior esquerdo, 10px no canto superior direito, 20px no canto inferior direito e 30px no canto inferior esquerdo.

O resultado pode ser visto na Figura 1.

CSS3: Border-radius

Figura 1. Divs com borda arredondada

Funcionamento em detalhes

Compreender o real funcionamento dos códigos que utilizamos é fundamental para obter os resultados esperados com maior qualidade e menor esforço. No caso da propriedade border-radius, o valor atribuído a ela corresponde ao raio de um círculo inscrito em um quadrado cujo vértice coincide com o vértice do elemento que deverá ter a borda arredondada. Essa definição pode ser melhor compreendida ao analisarmos a Figura 2.

CSS3: Border-radius

Figura 2. Funcionamento da propriedade border-radius

Consideraremos aqui que o retângulo azul é o elemento que desejamos formatar, e que estamos tratando, neste caso, do vértice superior esquerdo. A extremidade equivalente do quadrado vermelho coincide com a do retângulo azul e dentro dele há um círculo inscrito de raio R. O valor de R é exatamente aquele que atribuímos à propriedade via CSS.

O resultado final será, então, o que ilustra a Figura 3.

CSS3: Border-radius

Figura 3. Resultado final com borda arredondada

Dica: Elementos circulares

Compreendendo o funcionamento dessa propriedade, podemos partir de um elemento quadrado e obter um em formato circular com facilidade. Para isso, basta que o border-radius seja preenchido com um valor igual à altura ou largura desse elemento (que por ser quadrado, serão iguais).

O formato circular tem sido muito utilizado, por exemplo, em fotos de perfil e galerias de imagens. No exemplo abaixo, podemos ver como esse efeito seria obtido:


    <img src="avatar.png">
    <img src="avatar.png" id="img_circular">

Considerando duas imagens iguais contendo uma foto, tornaremos a segunda circular ao aplicar a formatação contida na Listagem 3.


    img {
        width: 200px;
        height: 200px;
    }

    #img_circular {
        border-radius: 200px;
    }
Listagem 3. Formatação de imagem circular

Observe que a propriedade border-radius recebeu um valor equivalente à altura/largura da imagem. O resultado pode ser visto na Figura 4, na qual podemos comparar a imagem original à que foi modificada.

CSS3: Border-radius

Figura 4. Imagem circular

Clique aqui e veja mais exemplos criados pela comunidade DevMedia :)