CSS: Bordas arredondadas para quem tem pressa

Arredondar bordas no CSS nunca foi uma tarefa muito agradável. Você precisa recortar as imagens, fazer algumas piruetas com as tags e nem sempre você consegue deixar como esperado. Se você está com pressa e precisa dos divs redondinhos right now!, dê uma olhada nas alternativas que separei para você:
  1. CSS Rounded Box Generator cria imagens dinâmicas nas cores que você quiser e ainda fornece os códigos do CSS e HTML na mão. Assim nem tem graça.
  2. O Rounded Cornr também cria imagens, fornece o código e ainda permite maior customização com extras como raio (radius) da curva e um background em degradê.
  3. Existe também esta técnica aqui em que você cria várias tags e classes em diversos tamanhos para simular uma borda arredondada. Suja o código e eu não aconselho, mas no desespero...
  4. Por último, se você é um Open Source Geek ou não liga para os usuários de IE, pode colocar no seu css o seguinte código que funciona tanto no Firefox quanto nos browsers com framework Webkit [en]:
.classe { -moz-border-radius: 10px;
-webkit-border-radius: 10px; }
Apesar de serem soluções fáceis e práticas, não se apegue a elas. Fazer o próprio código ainda é o melhor custo/benefício.

Gostou desse texto? Siga-me no Twitter @richardbarros

24 comentá em “CSS: Bordas arredondadas para quem tem pressa

  1. odirlon 27/01/2008 11:51

    Pocha eu tento e tento e ternto mas não consigo colocar o codigo
    >:/
    tem como ajudar?

    Responder

  2. Cíntia Coutinho 23/04/2008 09:46

    Então… os 2 primeiros links não funcionam.

    Responder

  3. Luiz Henrique 11/10/2008 01:22

    Muito bom, gostei demais… valeu pela dica…!!

    Responder

  4. marcos 18/12/2009 17:05

    sua dica foi excelente, parabéns.

    Responder

  5. Henrique 18/01/2010 00:25

    Galera seguinte
    Vou mandar o que eu aprendi
    procurando na internet…

    CSS /* div para fazer borda redonda */
    #div {
    border-left: 2px solid black;
    border-right: 2px solid black;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    -moz-border-radius:10px;
    /* Firefox, etc */
    -khtml-border-radius:10px;
    /* Konqueror, etc */
    -webkit-border-radius:10px;
    /* Safari, Google Chrome, etc */
    -opera-border-radius:10px;
    /* Opera */

    }

    **NÃO ESQUEÇA DE DETERMINAR O TAMANHO **
    esse codigo funcionou pra min…
    È muito simples…
    Espero que gostem…
    Fui…

    Responder

    Matheus Reply:

    Realmente, o comentário que você postou explicou melhor do que esse post todo, me desculpe a quem publicou o post…

  6. Wagner 16/02/2010 14:20

    Ja usei esse ai tambem Henrique, foi a unica forma que consegui fazer funcionar no IE, acho que nos desenvolvedores deveriamos boicotar os navegadores,
    pra so rodar em um, se não tem tal navegador clique aqui para instalar e ver o site.
    talves assim eles tenham mais respeitos,
    de agora em diante vou coloca nos meus para melhor visualização veja no FF.
    Viagem…..

    Responder

  7. Paula Eveling 03/04/2010 11:21

    Henrique, seu código funcionou corretamente, agradeço.

    Atenciosamente.

    Responder

  8. Brayan 13/09/2010 11:52

    Eita, Muito bom :D Me salvo aki ja no seu primeiro link hehe
    parabénssss pelo post.
    Sucesso

    Responder

  9. Samuel 27/09/2010 15:28

    Rapaz, valeu pelo script no meu funcionou corretamente tanto no Fire quanto no IE.

    Obrigado!

    Responder

  10. E,Martins 19/09/2011 20:59

    Bom Galera o Que Consegui Intender ate Agora è que o Internet Explorer é muito Fraco quando o asunto é CSS,
    a Microsoft tem que deixar o conservadorismo de lado e entra na Onda dos Navegares mais Atuais, no mais o código do Henrique é muito bom. vlw

    Responder

  11. Jwanna 28/10/2011 04:36

    Oi pessoal, preciso de uma técnica que funcione para todos os brousers incluindo o Internet Explorer ? É uma das exigências do meu professpr…

    Responder

  12. COELHO G. C. 19/07/2012 16:25

    …Assim deve ter graça? Reutilização de código é o que há. Fazer código na mão e ficar reinventando a roda e coisa de quem gosta de ficar perdendo tempo.

    Responder

  13. matteus 26/06/2013 23:51

    cara pra google chrome sua opção numero 4 é simplesmente PERFEITA E A MAIS RAPIDA
    QUE EXISTE !!!
    VALEU POR COMPARTILHAR.

    Responder

  14. Charles Code 17/07/2014 21:08

    Que nada crie uma tag no próprio Html

    .tron-ui-corner-all {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border: 1px solid #333;
    }

    Crie uma div no próprio Html e chame a classe tron-ui-corner-all.

    Salve e pronto.
    Isso tudo no mesmo documento Html!!!!!

    Responder

  15. Charles Code 17/07/2014 21:13

    #CORREÇÃO : >>
    Que nada crie uma tag no próprio Html


    .tron-ui-corner-all {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border: 1px solid #333;
    }
    </code

    Crie uma div no próprio Html e chame a classe tron-ui-corner-all.

    Salve e pronto.
    Isso tudo no mesmo documento Html!!!!!

    Responder

  16. Charles Code 17/07/2014 21:14

    Esse site não deixa colocar as tags de forma perfeita
    me passem um e-mail.

    Responder

Faça um comentário

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>