Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Efeitos CSS Vanessa S.

Criar Bordas Arredondadas usando CSS3 (Border-radius)

A propriedade “Border-radius” nos permite criar bordas arredondadas nos elementos do Blogger.
O uso do CSS3, incorpora novas propriedades, e com ele podemos controlar e definir o arredondamento das esquinas dos elementos, definindo o tamanho do raio da curva, sem a necessidade de utilizarmos imagens.
É este efeito que uso aqui no meu blog, e para aqueles que utilizam os navegadores que dão suporte a CSS3, conseguem visualizar o efeito.
O único problema é que esta propriedade não está disponível em todos os navegadores.
Funciona perfeitamente no Firefox, Flock, Safari, Chrome e Opera.

Veja os Browsers que suportam esta propriedade:
? Firefox 3.0 ou superior
? Flock 2.5 ou superior
? Chrome
? Opera
?Safari

Não funcionam nos Browsers:
? Internet Explorer
? Opera versão inferior a 10.

É claro que o Internet Explorer ( maldito IEca) não dá suporte a CSS3, (este navegador é o terror dos desenvolvedores web) portanto quem utiliza este navegador, nunca consegue visualizar os efeitos mais diferentes e interessantes possíveis, como bordas arredondadas, sombras nos textos, entre outros.
Por este motivo que digo e repito: “larguem o IE, pelo amor de Deus”. Já até publiquei uma campanha existente na web que explica melhor sobre esse assunto.

Mas, voltando ás bordas arredondadas,para utilizá-la em seu blog, basta inserir a chamada para a propriedade, no CSS do seu template.

Como esta propriedade, ainda não está totalmente implementada, para alguns navegadores é necessário a aplicação de atributos especias para que cada navegador reconheça a propriedade:

border-radius (padrão)
-moz-border-radius (navegadores Flock e Firefox)
-webkit-border-radius (navegadores Chrome e Safari)

Desta forma, devemos aplicar os atributos a cada elemento que você pretende incluir bordas arredondadas, como por exemplo, colunas do blogger.

[alerta]ATENÇÃO:Você só irá conseguir entender este tutorial se já tiver conhecimento sobre bordas. O pré requisito é que você saiba usar bordas no seu template, se ainda não sabe, sugiro que leia este post: Aprendendo sobre bordas no template.[/alerta]

1) Aplicar o efeito redondo diretamente no post do blogger:

Segue alguns exemplos para aplicação de bordas arredondadas em textos e abaixo de cada exemplo o código referente.

1. Bordas arredondadas iguais em todas as esquinas:
Este texto você visualiza com as bordas arredondadas, se você não estiver usando o Internet Explorer.

<div style="background:#6959CD;color:#fff;
border: #000 5px solid;padding: 10px;border-radius:20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;">Este texto você visualiza com as bordas arredondadas, se você não estiver usando o Internet Explorer.</div>

Código para aplicar o efeito em algum seletor(elemento) no template:

border-radius:20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
2. Bordas arredondadas apenas em alguns lados:

2.1. topo direito e rodapé esquerdo:

Este texto você visualiza com as bordas arredondadas, se você não estiver usando o Internet Explorer.
<div style="background:#9B30FF; color:#fff; border: #68228B 10px solid; padding: 10px; -moz-border-radius:0 20px;-webkit-border-radius:0 20px;border-radius:0 20px;">Este texto você visualiza com as bordas arredondadas, se você não estiver usando o Internet Explorer.</div>

Código para aplicar o efeito em algum seletor(elemento) no template:

-moz-border-radius:0 20px;
-webkit-border-radius:0 20px;
border-radius:0 20px;

2.2. topo esquerdo e rodapé direito:

Este texto você visualiza com as bordas arredondadas, se você não estiver usando o Internet Explorer.
<div style="background:#9B30FF; color:#fff; border: #68228B 10px solid; padding: 10px; -moz-border-radius:20px 0;-webkit-border-radius:20px 0;border-radius:20px 0;">Este texto você visualiza com as bordas arredondadas, se você não estiver usando o Internet Explorer.</div>

Código para aplicar o efeito em algum seletor(elemento) no template:

-moz-border-radius:20px 0;
-webkit-border-radius:20px 0;
border-radius:20px 0;
3. Bordas arredondadas somente nas esquinas do topo:
Este texto você visualiza com as bordas arredondadas, se você não estiver usando o Internet Explorer.
<div style="background:#6959CD;color:#fff;
border: #000 1px solid;padding: 10px;border-radius:10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0;">Este texto você visualiza com as bordas arredondadas, se você não estiver usando o Internet Explorer.</div>

Código para aplicar o efeito em algum seletor(elemento) no template:

border-radius:10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
4. Bordas arredondadas somente no rodapé:
Este texto você visualiza com as bordas arredondadas, se você não estiver usando o Internet Explorer.
<div style="background:#6959CD;color:#fff;border: #000 1px solid;padding: 10px;border-radius:0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px;">Este texto você visualiza com as bordas arredondadas, se você não estiver usando o Internet Explorer.</div>

Código para aplicar o efeito em algum seletor(elemento) no template:

border-radius:0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;

Para aplicar o efeito redondo nas bordas em textos no post basta colar o código referente à propriedade, no corpo da postagem, através da aba “editar html”.
Veja um exemplo para você entender melhor o código:


<div style="background:#xxx  -->(cor de fundo);
color:#xxx  -->(cor do texto);
border: #xxx(cor da borda) Xpx(espessura da borda) solid(tipo de borda);
padding: 10px;
border-radius:10px;  -->(tamanho do raio da curva de cada borda)
-moz-border-radius: 10px;
-webkit-border-radius: 10px;">
SEU TEXTO
</div>

Lembre-se, este são apenas alguns exemplos, para você conseguir entender o código, pois você deverá editar cores, bordas e definir o tamanho do raio da curva de cada borda.

2) Aplicando este efeito diretamente na folha de estilos do Blogger:

Podemos também acrescentar o efeito à folha de estilo no template, para que seja aplicada a determinados elementos.

Vá no menu “modelo >> Editar HTML”, marque “Expandir modelos de widgets”.
Copie o código abaixo e cole-o ACIMA de ]]></b:skin>


#borda-arredondada{
-moz-border-radius: 10px;  /*-- para Firefox e Flock --*/
-webkit-border-radius: 10px;  /* para Chrome e Safari --*/
border-radius: 10px;
border: 1px solid #000000; /*--- Edite cor e espessura da borda ---*/
}

Sempre que quiser aplicar o efeito redondo em bordas em algum texto no post, no modo “Editar HTML” da postagem, acrescente a seguinte linha:


<div id='borda-arredondada'>
SEU TEXTO
</div>

3) Podemos também, aplicar este efeito em uma coluna no blog, por exemplo, na coluna total da área de postagens (#main-wrapper ou .main-outer – dependendo do modelo do seu template).
Vá no menu “modelo >> Editar HTML” Não precisa clicar em “Expandir modelos de widgets” e procure pelo trecho correspondente ao código referente a coluna central de postagens no seu template. Dependendo do modelo, pode ser #main-wrapper ou .main-outer
e cole abaixo dela o seguinte código:


-moz-border-radius: 10px;  /* para Firefox e Flock*/
-webkit-border-radius: 10px;  /* para Chrome ou Safari */
border-radius: 10px;

Para cada elemento que queira aplicar bordas arredondadas, basta incluir estes atributos (logo abaixo do nome do elemento), da seguinte forma:


Nome do Elemento {/*Pode ser #outer-wrapper, .content-outer, #main-wrapper,.main-outer, .sidebar,#sidebar-wrapper, .footer, #header,etc*/
-moz-border-radius: 10px;  /* para Firefox e Flock*/
-webkit-border-radius: 10px;  /* para Chrome e Safari */
border-radius: 10px;
}

4) Aplicar o efeito nos Títulos dos Posts:

Procure no corpo do HTML do seu blog, o código de comando do Título do Post, que geralmente é .post h3 ou .post-title, dependendo do modelo do seu template.
E acrescente logo abaixo as seguintes linhas:


-moz-border-radius: 10px;  /* para Firefox e Flock*/
-webkit-border-radius: 10px;  /* para Chrome e Safari */
border-radius: 10px;
border:1px solid #000   /*--- Edite  ---*/

Leia outros artigos que tratam sobre personalização do título dos posts, talvez você se interesse em conhecer outras maneiras de personalizá-los, podendo, inclusive, inclui-los a este efeito publicado neste tutorial:

  • Personalizar os Titulos dos Posts
  • Efeito Sombra.
  •  

    5) Aplicar o efeito na área de Posts:

    Procure no corpo do HTML do seu blog, o código de comando da área de Post, que geralmente é .post ou .post-outer , dependendo do modelo do seu template.
    E acrescente logo abaixo as seguintes linhas:

    
    -moz-border-radius: 10px;  /* para Firefox e Flock*/
    -webkit-border-radius: 10px;  /* para Chrome e Safari */
    border-radius: 10px;
    border:1px solid #000   /*--- Edite  ---*/
    

    Basicamente é isso!
    Você pode aplicar este efeito em vários elementos no seu template, como por exemplo:
    para diferenciar partes de textos em suas postagens destacados pela função Blockquote, ou em partes na Área de comentários, ou até mesmo na sidebar.
    Você também pode incluir um efeito sombreado na borda arredondada.
    Use a imaginação e aplique este efeito redondo nas bordas onde você preferir.

    Sobre o autor | Website

    Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

    Desculpe, os comentários deste artigo estão encerrados.

    31 Comentários

    1. Heloísa disse:

      Mt obrigada. Procurava isso faz década, haha *-*

    2. Raíssa disse:

      Não consegui aplicar bordas arredondadas no blokquote, mas todas as dicas de como personalizar ele deu certo ^^… Adoro seu blog. Obrigada por tda a ajuda 🙂

    3. flavio disse:

      testei agora no internet explorer 9 e esta funcionando,
      quem estiver com problema ,basta ir em EDITAR HTML
      procurar por :

      e trocar o ‘IE=EmulateIE7’ por ‘IE=EmulateIE9’ assim:

      e lógico instalar o internet explorer 9

    4. LEANDRO disse:

      Muito bom o tutorial, vc é programadora?

    5. SamantaSammy disse:

      Olá ! Vim novamente agradecer pela dicas, usei as bordas na minha sidebar e ficou incrível !!! Empolguei e estou procurando outros elementos para usá-las também rsrs Fica muito bonito e diferente 🙂

      Obrigada 😀 Beijos e bom fim de semana 😀

    6. Stefanny disse:

      nao funciono nada

    7. Vitor disse:

      Segui essas dicas mas nada funcionou

    8. Márcio Batista da Silva disse:

      Mas o que acontece se eu ativar o recurso “Leia mais” em uma postagem com este código?

    9. .:: Clau ::. disse:

      João Vitor
      Tem tutorial sobre isso neste artigo aqui ó:
      Criar caixa para exibir códigos no post. Espero que ajude.

    10. João Vítor Dias disse:

      Olá.
      Como sigo seu blog a puco tempo, gostaria de saber: como vc faz essa caixinha de código?

      se vc já tiver publicado algum artigo sobre o assunto, por favor, me indique

      Att,
      João Vítor Dias
      joaodias@jvdesign.co.cc
      http://www.jvdesign.co.cc

    11. Fael disse:

      Mais um tutorial que deu certo pra mim..
      Pena que não são todos!!
      ;PPP

    12. Raphael B. de Sousa disse:

      Tentei colocar essas bordas arredondadas, porém apenas 3 delas aparecem arredondadas. Quando tento colocar a quarta, repetindo o valor de 20px, no caso do meu blog, todas as margens ficam retas novamente.
      Você tem alguma dica?

      Valeu!

    13. ana costa disse:

      De-sis-to! não consigo por as bordas arredondadas nos meus post! já tenho a cabeça à volta de tanto tentar…
      Não consigo perceber como e onde ponho as cores, as medidas… sou mt buurra….

    14. Luis Henriques disse:

      Clau, a quanto temp oem? rs

      Agora com a noca versão do Internet Explorer você já sabe se esse efeito de bordas arredondadas está funcionando nele. Thauthau!

    15. Caio disse:

      Olá clau só tenho uma duvida como faço para mudar a cor?
      Caio vinicius

    16. john.kasadei disse:

      Muito bom o tutorial. Vc poderia me informar como faço pra fazer modificações na exibição (alt) dos links, que nem o do site mundoblogger aqui?

    17. Vinicius Chargel disse:

      Nossa, ótimo tutorial! Usei este recurso para arredondar as bordas do hack "Leia mais", e ficou muito bom. Parabéns pelo blog, e obrigado por compartilhar conosco este ótimo recurso!

      Vinicius Chargel.

    18. .:: Clau ::. disse:

      Silas Yudi
      Realmente eu verifiquei que nos exemplos do meu tutorial as bordas não estavam aparecendo arredondadas no Chrome. O que deve ter acontecido é que na hora q eu coloquei o código na "div" pra exemplificar eu esqueci de acrescentar as chamadas "webkit", mas nas caixinhas de código pra vcs copiarem estava certinho..só no meu exemplo é q não estava, mas já corrigi. As vezes eu me enrolo mesmo, é muito código pra publicar..rs
      Pra poder funcionar no Firefox,Chrome e no Opera, vc deve incluir as chamadas para cada navegador , etm a explicação no ínicio do tutorial.
      Sobre o internet Explorer,nele não funciona bordas arredondadas mesmo.

    19. Silas Yudi disse:

      O meu navegador é o google chrome, e os efeitos das divs desse tutorial não apareceram… quando copiei as divs e coloquei no meu blog de testes, apareceram. Só que, coloquei somente o "border-radius".
      assim ó:

      (div style="background:#6959CD;color:#fff;
      border: #000 5px solid;padding: 10px;border-radius:20px;")Este texto você visualiza com as bordas arredondadas, se você não estiver usando o Internet Explorer. (/div)

      Vai funcionar só no chrome, ou no firefox tb funciona? e no IE 8 e 9?

      precisa mesmo dos moz e webkits?

    20. ::Clau:: disse:

      @thesims3tg.com:
      Eu quem agradeço pela dica. Vou dar uma lida no artigo.
      Sobre as bordas, que vc disse que não visualiza no seu chrome, pode ser que a sua versão seja diferente da minha, pq aqui no meu eu visualizo tudo normalmente, mas em todo o caso, obrigada pelo toque e pela dica.
      Volte sempre!

    21. thesims3tg.com disse:

      Estou usando o google chrome e aqui não aparece a sua borda. Existem hoje várias tags desta função para cada grupos de browsers diferentes (inclusive safari, firefox e chrome). Podemos ver isso neste site: http://www.the-art-of-web.com/css/border-radius/

      Lá tem uma solução para internet explorer usando a tag behavior: url(); vale a pena conferir. Obrigado pelo. Rick

    22. Mary disse:

      Clau vlw pela diga! Nossa era tão fácil hauhauaha
      O q seria de mim sem o seu blog O_o Eu acompanho vários blogs q dão dicas para layouts, mas nenhum é igual o seu e nem todas as pessoas são pacientes como vc. Bjinhos flor!

    23. ::Clau:: disse:

      @Mary:
      Vc tem q colocar o banner pelo HTML do template mesmo, no mesmo local que estava o outro(original).
      E para retirar o nome do cabeçalho para q não apareça no layout, existe um "macetinho", dá uma lida neste post:
      Personlaizar o cabeçalho do blog.

    24. ::Clau:: disse:

      @L. Tadeu:
      Eu me refiro ao assunto: blogs com conteúdo gótico, blog de informações ou dicas em geral(sobre tecnologia,blogger,wordpress,internet etc).

    25. L. Tadeu disse:

      "Gothic Darkness" eu dei uma lida la porém não entendi uma coisa, em relação a ter que ser igual ao tema do Gothic Darkness o template ou a "materia" em si, da uma olhada no meu e vê se você colocaria como parceiro xD
      smasherblog.com
      *Adicionando o seu banner la
      Valeu pela atenção
      Bjs :*

    26. Mary disse:

      Clau to precisando de um help.
      Eu fiz uma imagem pra por no Header do blog e nela eu já escrevi o titulo do blog. Eu coloquei ela diretamente no template e o titulo do blog ficou aparecendo por cima ai a solução foi postar a imagem no espaço do cabeçalho mas ficou feio,uma por cima da outra. Se tiver jeito me explica por favor? =D bjinhos

    27. ::Clau:: disse:

      @Mary:
      Ah,agora eu vi.Já fui lá!=)

      @L. Tadeu:
      Sobre parcerias, dá uma lida em nossa Política de parcerias para ver como funciona.
      Sobre este efeito que vc citou, vou preparar um tutorial e disponibilizá-lo aqui. aguarde que logo estará na ar.
      Obrigada pela visita e volte sempre!

      @Kakashi:
      Vou preparar um tutorial ensinando esse efeito.

    28. Kakashi disse:

      por favor crie um tuto ensinando como vc coloca essa sombra quando passa o mouse, por exemplo:

      quando eu passo o mouse no menu la em cima aparece:
      "tenha um template com seu estilo,encomende o seu" com um fundo azul, eu queria aprender como se coloca isso no blog

    29. L. Tadeu disse:

      MUUUUUUUUUUUITO BOM, PERFEITO!
      Nunca vi isso em nenhum outro blog *O*
      Vou procurar por no meu proximo blog xD
      uma duvida, como fez aquele efeito do elemento "Divulgue" que ao passar a seta sobre "Veja outros banners>>>" fica aquela frase bem destacada, e também queria saber se vocês aceitam parceria xD
      http://www.smasherblog.com
      Bjs :*

    30. Mary disse:

      Oi Clau! Gostei mto desse post,depois vou testar no meu blog =D
      Aaahh lembrei q vc disse num comentário q foi me seguir e não deu, agora da hehe.
      Peguei um monte de dicas aqui hj, to cansanda de mexer no layout :/ bjinhos flor!

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