Dominio: codigosblog.com.br
Chave: af255c39c6cbf2ba03ac5b531649215539d8d61a
Hora do cache: 1500849056
Vida do cache: 1500892256
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Blogs,
SEO e Monetização.

Hospedagem - 728 x 90

layouts

Como arredondar bordas via CSS

Devido ao grande número de pedidos vou fazer esse post! =]
A melhor forma de arredondar as bordas de qualquer parte do template é fazendo imagens com cantos arredondados, pois fazer isso via código CSS pode dar incompatibilidade em navegadores antigos que não dão suporte a versão 3.0 do CSS.

"Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento [...]"
Texto: Wikipédia

Então vou deixar bem explicado: CSS 3.0 é uma versão mais nova do “Cascading Style Sheets” e por se tratar de uma novidade, alguns códigos não são “lidos” por navegadores antigos, exemplo: Internet Explorer 8.0 ou inferior (Sim, o IE 8.0 já é antigo! Ou melhor... O IE sempre está atrás). Como a Microsoft trabalha mal no Internet Explorer (ou em quase tudo), não fique assustado se as bordas ficarem retas no IE.
Obs.: O máximo que pode acontecer é o navegador não interpretar o código diferente da velha versão. Não vai prejudicar de forma direta o resto da codificação.

Bom, o código para colocar bordas arredondadas:

-moz-border-radius: 10px; /* Para Firefox */
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Opera 10.5+*/

  • Onde está 10px substitua pelo número que você quiser, pois isso define a curvatura da borda, enquanto maior o número, maior será a forma arredondada.
  • Os três campos são necessários, pois cada um é usado em algum navegador diferente (Comentado acima entre /* e */)

Você pode usar o código acima dentro de uma DIV (id ou class) ou em (quase) qualquer lugar que você quiser dentro do HTML do seu blog (Blogger -> Design -> Editar HTML).

Exemplo:

#exemplo1 {
width: 400px;
height: 100px;
margin: 10px;

-moz-border-radius: 8px; /* Para Firefox */
-webkit-border-radius: 8px; /*Para Safari e Chrome */
border-radius: 8px; /* Para Opera 10.5+*/

background: #f7f7f7;
padding: 20px;
border: 1px solid #000;
color: #000;
}

Exemplo em ação:

Testes

Abraços Pessoal!



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

35 Comentários

  1. Marcos-Gabriel disse:

    o IE não pode ser ignorado jamais.
    seria bom que vc alerta se isso.

  2. Blog da Mecânica disse:

    O código esta correto, mas o exemplo não esta funcionando no chomme…

    Mas o que foi ensinado acima esta certinho.

    Podem fazer o teste que esta perfeito…

  3. Rickzinhocps disse:

    Não due certo Paulo, define pra gente um local pra colocar o código.
    Tentei colocar no "body {" mais não funcionou …
    Vou tentando aquiaí se eu conseguir eu te aviso Ok.

  4. 1001-tutoriais.com disse:

    Muito boa dica, irei aplicar isto ás bordas do meu menu 😉

    Obrigado pela dica!
    RicardoBr

  5. Rickzinhocps disse:

    Não deu certo aqui Paulo,
    Você poderia me passar um local(uma div) pra mim adicionar o código porque eu não consigo tento em várias div's, id's e etc e nada de bordas arredondadas.
    E eu uso o Mozilla Firefox 3.6,
    Acho que ele lê CSS3 né ?!

    Abraços

  6. blog.clacelestial.com disse:

    Tem um site que gera automaticamente, pena que perdi o link.

  7. publicidade-na-web.com disse:

    Muito interessante a dica.

    Obrigado por compartilhar conosco.

    Um abraço
    Adriano Luz

  8. Igor Sousa disse:

    Opa, ótima dica Paulo!
    Só para complementar o post. Eu vejo muito estes códigos que você mostrou nos novos templates do Blogger, mas geralmente eles aparecem em 4 linhas:

    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -goog-ms-border-radius: 8px;
    border-radius: 8px;

    A linha que "faltava" eu coloquei em negrito, mas eu não sei à qual navegador se aplica. De qualquer maneira, é sempre bom acrescentá-la, como dizem: "melhor sobrar do que faltar".

    Forte abraço.

  9. Liana disse:

    Meu comentário é sobre outra coisa: Podiam me responder se tem como fazer postagens separadas nas páginas que criamos em um blogger?Cirar as páginas eu sei, fazer o menu pra exibilas eu sei…mas cada uma delas fica com uma única postagem que eu yenho que ir atualizando com dados.Da pra dividir as postagens das páginas, ou isso só se pode fazer na principal?
    http://www.livros-series.blogspot.com
    liana.goulart@yahoo.com.br
    Obrigada!!

  10. Elton Max JG disse:

    Otima Dica Mesmo ! Usei em praticamente tudo no meu blog . Fica bem mais bonito !

  11. Jet disse:

    Oh,your blog is very nice .I really like it ^^!

    ..♥♥..♥♥..♥♥..♥♥..♥♥..♥♥..♥♥.
    ♥..♥  ╔══╦══╗╔╦══╗  ♥..♥
    ♥..♥  ╚═╗║╔╗║║║╔╗║  ♥..♥
    ♥..♥  ╔═╝║║║║║║║║║  ♥..♥
    ♥..♥  ║╔═╣║║║║║║║║  ♥..♥
    ♥..♥  ║╚═╣╚╝║║║╚╝║  ♥..♥
    ♥..♥  ╚══╩══╝╚╩══╝  ♥..♥
    ♥..♥♥..♥♥..♥♥..♥♥..♥♥..♥♥..♥

    ———————————-
    Welcome to my websites : In there where have a lot of wallpapers, themes for desktop , for mobile and themes for media ^^!
    http://9wallpapers.blogspot.com
    http://theme4desktop.blogspot.com
    http://theme4cellphone.blogspot.com
    http://theme4media.blogspot.com
    http://wallpaper4cellphone.blogspot.com

  12. Paulo Estevão disse:

    @Marcos,
    Ignorado? O código só não vai funcionar no IE. Isso é ignorar? Culpa do IE e não do código. Acredito que não vai fazer muita diferença se o blog aparecer com os cantos retos no IE.
    Abraços

    @Rickzinhocps,
    Eu disse pra testar em uma DIV. =]
    Vai tentando que dá. O único navegador (dos mais usados) que não funciona o código acima é o IE.
    Abraços

  13. Gontijø disse:

    Muito maravilhoso esse seu tutorial…
    uheuHEuHEuE
    nunca acreditei que pudesse ser tão fáciul aderir ao CSS 3.0
    meu blog está ficando maravilhoso com o CSS 3.0…
    deem uma olhada em como ele ficou: http://beembolado.blogspot.com
    abraços e parabens pelo site

  14. desenhodg disse:

    o certo seria se fosse padronizado, no lugar de uma linha para cada navegador, deveria ser uma só para todos.
    a linha: -goog-ms-border-radius: 8px;
    creio eu que seja para o google chrome, porque tá "goog", apesar de depois ter ms também, mas no ie aqui não funcionou e o chrome eu não tenho, então não não deu para fazer o teste.

  15. Aruã Torres disse:

    Aew! Deu certo aqui, valeu pela dica.

  16. AnA pAuLa disse:

    Gostaria de sabe se tem como colocar essas bordas em uma caixa de texto dentro dessa caixa um codigo de html em vez de texto..

  17. Kevin Oliveira disse:

    Muito obrigado, estava precisando mesmo!

  18. Igσя'~нαяdy disse:

    Parabéns pela dica, ajudou muito!
    Depois confere o resultado no meu Blog 😉
    Até mais..

  19. Douglas disse:

    o goog-ms-border não é do chrome, o chrome usa sistema Webkit…

  20. cHucKy disse:

    nice thanks for share

  21. Rogério Yokoi disse:

    Parabens pelo post muito bom……

    -moz-border-radius: 8px; /*Firefox*/
    -webkit-border-radius: 8px; /*Chrome e Safari*/
    -goog-ms-border-radius: 8px; /*Internet Explorer*/
    border-radius: 8px; /*Opera*/

    Só não sei de qual versão a frente é suportado no IE o código para arredondar, pois aqui em casa só tenho o 9…. e nele funciona!

  22. Randromedo disse:

    naum acredito que cai mas uma vez aki, e como sempre ajudando há tira minhas duvidas obrigado. adorei este post muito bom mesmo, são poucos os websites q conseguem explicar com bastante claridade.

  23. Lucas L. disse:

    vlwwwwwwwwww

  24. Katerine Liima disse:

    muito bom mesmo cara vlw!!

  25. Fabio Cabrera disse:

    Muito bom o post. Funcionou direitinho em meu site.

    Veja como ficou neste link http://www.rhpontocom.com

    Abs,

    Fabio Cabrera

  26. Vanderson Alves disse:

    Muito Obrigado, me ajudou bastante.
    Ótimo post !!!!!

  27. lubs disse:

    tem como aplicar esse efeito apns em dois lados?

  28. DJJM GOMES disse:

    Peguem o CSSPIE QUE funcionar pelo menos no navagadores que testei funcionou normalmente depois de muito buscando na net resolvi meu problema.
    codigo abaixo;

    position: absolute;
    top: 160px;
    left:370px;
    width: 530px;
    height: 300px;
    /* Para Mozilla/Gecko (Firefox etc) */
    /* Para WebKit (Safari, Google Chrome etc) */
    /* Para IE 8 */
    /* Para IE 5.5 – 7 */
    border: 1px solid #696;
    padding: 20px 0;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: #666 0px 2px 30px;
    -moz-box-shadow: #666 0px 2px 30px;
    box-shadow: #666 0px 2px 30px;
    background: #ccdee8;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ccdee8), to(#81a9c2));
    background: -webkit-linear-gradient(#ccdee8, #81a9c2);
    background: -moz-linear-gradient(#ccdee8, #81a9c2);
    background: -ms-linear-gradient(#ccdee8, #81a9c2);
    background: -o-linear-gradient(#ccdee8, #81a9c2);
    background: linear-gradient(#ccdee8, #81a9c2);
    -pie-background: linear-gradient(#ccdee8, #81a9c2);
    behavior: url(/PIE.htc);

    }
    VLW PESSOAL

  29. Antonio Maniçoba disse:

    Ola Pessoal,

    Eu uso os códigos abaixo sempre aplicando a cada imagem usada e em cada div, assim tenho a certeza de que vai dar certo, quando se aplica a uma imagem e uso da seguinte maneira:

    OBS: Sempre da certo.

    VAleu

    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -goog-ms-border-radius: 8px;
    border-radius: 8px;

  30. Arthur Candelaria disse:

    Está correto, mas o comando se trata de css3 então não irá funcionar em todos os navegadores

  31. iran disse:

    Olá,
    fiz nas imagens thumbnails e ficou legal o efeito. Valeu!

  32. Yuri disse:

    Ficou perfeito no chrome vlw msm

  33. ola amigos do Codigosblogs parabens pelo belo servico que ajuda a muito.
    Bom a minha dificuldade e retirar ou dimunir o rodape do blog.E la no HTML nao encontro a linha referente ao assunto.
    Quem tiver alguma dica por favor.

Para enviar seu comentário, preencha os campos abaixo:

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.