Bordas arredondadas com CSS

Estilize divisórias com bordas arredondadas para o seu site com facilidade, usando apenas instruções em CSS.

Para o nosso exemplo, vamos criar no corpo do site (na Body da página) uma divisória que nomearemos de box:

<div class="box"></div>

E estilizamos essa divisória no cabeçalho da página (você pode usar um arquivo de CSS externo), com as atribuições para a largura, altura e cor de fundo:

<style type="text/css">

   .box {

        width:300px;

        height:100px;

        background-color;yellow;

   }

</style>

Nossa divisória será exibida assim:

Então, nosso box é um retângulo amarelo, ou seja, uma divisória com quatro ângulos retos. Para arredondarmos esses cantos, vamos apenas acrescentar no código de estilos CSS a linha seguinte, que estabelece um efeito de rádio de 30px:

border-radius:30px;

O resultado será:

Você pode optar por arredondar apenas certos cantos da divisória. Por exemplo, pode querer arredondar somente os cantos superiores. Para o nosso exemplo, vamos editar a linha do border-radius para essa nova instrução:

border-radius: 20px 20px 0 0;

A ordem dos valores indica: canto superior-esquerdo, superior-direito, inferior-direito e canto inferior-esquerdo.
E para incrementarmos, vamos acrescentar uma borda branca:

border:3px solid white;

E obteremos o seguinte:

Caso queiramos arredondar apenas um canto, basta atribuirmos o valor ao canto específico. Por exemplo, ao canto inferior direito:

border-radius: 0 0 25px 0;

E teremos:

Para o mesmo resultado, poderíamos usar a seguinte linha:

border-bottom-left-radius:25px;

Nesse caso, estamos especificando o canto inferior esquerdo.

Outro exemplo interessante é deixarmos dois ângulos retos e arredondarmos cantos verticalmente opostos, fazendo assim:

border-radius: 0 25px 0 25px;

Para o que receberemos como resposta:

Uma questão de compatibilidade

É importante observarmos a questão de compatibilidade dos navegadores, pois nem todos podem ler a instrução border-radius padrão. Então, a prudência nos manda instruirmos as adequações:

Para o Opera:
-o-border-radius: 15px;

Para o Mozila Firefox:
-moz-border-radius: 15px;

Para o Google Chrome:
-webkit-border-radius: 15px;

Portanto, um arredondamento de divisória, adequando para todos os navegadores, poderia ser escrito assim:

.box{
   width:300px;
   height:100px;
   background-color:yellow;
   border:2px solid white;
   border-radius:25px;
   -o-border-radius:25px;
   -moz-border-radius:25px;
   -webkit-border-radius:25px;
}