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.


9 respostas »

  1. odirlon diz:
    27/01/2008 as 11:51

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

    [Responder]

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

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

    [Responder]

  3. Richard diz:
    23/04/2008 as 15:20

    Links corrigidos

    [Responder]

  4. Luiz Henrique diz:
    11/10/2008 as 01:22

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

    [Responder]

  5. marcos diz:
    18/12/2009 as 17:05

    sua dica foi excelente, parabéns.

    [Responder]

  6. Henrique diz:
    18/01/2010 as 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]

  7. Wagner diz:
    16/02/2010 as 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]

  8. Paula Eveling diz:
    03/04/2010 as 11:21

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

    Atenciosamente.

    [Responder]

  9. Bordas arredondadas com CSS diz:
    12/04/2010 as 23:57

    [...] http://www.richardbarros.com.br/blog/css/css-bordas-arredondadas-para-quem-tem-pressa (ver post e [...]

URL para Trackback

Deixe um comentário