Como deixar a div com cantos arredondados CSS3

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:

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:

Ó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.

Deixe uma resposta

Seu e-mail não será publicado.