Olá, um dos recursos mais usados em CSS3 é de arredondamento de bordas das divs ou elementos, que deixa o visual da página web mais bonito e melhor de se ver, proporcionando ao usuário uma experiência diferente e atraente…
Para fazer uma div com cantos arredondados é simples, primeiro vamos criar uma div e um breve folha de estilo para ela:
<style type="text/css">
.arredonda{width:50%;height: 100px;background: blue;}
</style>
<div class="arredonda"></div>
Veja só temos apenas um retângulo azul, mas para arredondar o canto basta usar o comando border-radius, por exemplo border-radius:10px; arredonda os quatro cantos da div, veja:
<style type="text/css">
.arredonda{width:50%;height: 100px;background: blue;border-radius:10px;}
</style>
<div class="arredonda"></div>
Ótimo, para você arredondar apenas um canto da div você deve se guiar pelas palavras:
top: topo;
bottom: base;
right: direita;
left: esquerda;
Por exemplo, border-top-left-radius:10px; iria arredondar apenas o canto esquerdo superior.
Você provavelmente terá problemas com alguns navegadores, para garantir use os prefixos -moz para o Mozila e o –webkit para Chrome e Safari, exemplo: -moz-border-top-left-radius:10px;. Você certamente terá problema com o Internet Explorer que até a versão 8 não dava suporte a essa função. Espero ter ajudado, até a próxima.
