Bordas arredondadas com CSS3 (Sem imagens)

Hoje eu vou mostrar como deixar as bordas de uma Div (elementos da página do seu blog ou site) do template do seu blog arredondado, usando o poder do css3. O funcionamento é bastante simples, basta você adicionar os códigos CSS abaixo junto com o CSS do seu template.
A forma padrão é essa:


border-radius: 12px;


Só que dessa forma só funciona no opera 10.5.


Para que funcione no Firefox, basta colocar o código:


-moz-border-radius: 12px;


Para funcionar no Safari e Chrome, coloque:
  
-webkit-border-radius: 12px;


É preciso colocar os três códigos citados acima no CSS do seu template. O valor 12px pode ser mudado para o que você quiser (por exemplo, 10px, 20px, 5px e etc), quanto menor o valor, menos as bordas vai ficar arredondada.


Exemplo:

#comentarios {
Background: #333;
Border: solid 1px #FF0000;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-border-radius: 10px;
width: 400px;
height: 60px;
margin: 40px auto;
}
  
Exemplo2:

#comentarios {background: #999;
width: 500px;
height: 60px;
-moz-border-radius-bottomright: 12px;
-moz-border-radius-bottomLeft: 12px;
-webkit-border-bottom-right-radius: 12px;
-webkit-border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;

margin: 50px auto;
border: solid 1px #FF0000;
border-top: none;
}
  
Outros efeitos em bordas:


Para Firefox: 
   
-moz-border-radius-topright: 12px;
-moz-border-radius-TopLeft: 12px;





-moz-border-radius-bottomright: 12px;
-moz-border-radius-bottomLeft: 12px;


 
-moz-border-radius: 30px 5px;


 
-moz-border-radius: 30px 30px 50px 50px;


 
-moz-border-radius-topright: 70px 50px;
-moz-border-radius-bottomright: 70px 50px ;


Os efeitos acima em Safari e Chrome:


-webkit-border-radius-top-right: 12px;
-webkit-border-radius-Top-Left: 12px;
 
-webkit-border-bottom-right-radius: 14px;
-webkit-border-bottom-left-radius: 14px;


-webkit-border-radius: 30px 5px;


-webkit-border-radius: 30px 30px 50px 50px;


-webkit-border-radius-top-right: 70px 50px;
-webkit-border-radius-bottom-right: 70px 50px ;


Para funcionar no Opera, basta colocar do modo padrão.


Exemplo:


border-radius-top-right: 70px 50px;
border-radius-bottom-right: 70px 50px ;

 
Qualquer duvida deixe nos comentários.