Bordas arredondadas

|

A pedido de uma seguidora muito especial, trouxe pra vocês hoje um explicativo de como aplicar bordas arredondas semelhantes a que eu uso na coluna lateral ao seu layout.

O código da borda arredondada é esse abaixo:

-moz-border-radius: 10px; /* Para Firefox */

-webkit-border-radius: 10px; /*Para Safari e Chrome */

border-radius: 10px; /* Para Opera 10.5+*/

Agora vamos ver onde por o código. É só colar o código acima em baixo do código correspondente a área onde você quer por as bordas.

Na sidebar

  • Para o Modelo Viagem apenas!

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {      (Coluna direita)

ou

.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {        (Coluna esquerda)

Na área dos posts

  • Para o Modelo Viagem apenas!

.main-inner .column-center-outer {

divisória

Espero que tenham gostado! Kissus

sing-liah

68 comentários

  1. Estava á muito tempo procurando esse tutorial!
    Me ajudou muito
    Bjs,
    http://placestyle.blogspot.com/

    ResponderExcluir
    Respostas
    1. Stefani, por favor me responda uma coisa... Como vc fez para colocar aquelas imagens "rodando" no começo? Obrigado :3 Ah e se quiser visite meu blog! http://tmalikfoureverdirection.blogspot.com

      Excluir
  2. ain que tudo, conseguii!
    hey, não tem como arredondar também a parte do menu?
    bjinhos ;*
    http://amigasentresegredos.blogspot.com/

    ResponderExcluir
  3. Adorei o tuto,fofa.Adoro aqui!!Muito. ;D

    www.ehmake.blogspot.com

    ResponderExcluir
  4. oii td bem eu sou do blog startyley....queria saber como colocar um chat no blog que nem o seu?beijosss

    ResponderExcluir
  5. Obg pelo tuto flor! não sabia que era tão simples assim! obg mesmo! amo seu blog! bjos

    ResponderExcluir
  6. Eu não consegui ): Queria saber onde coloco o código...

    ResponderExcluir
  7. Tem sim é só incluir o código dentro do código CSS do menu =D

    ResponderExcluir
  8. Maria Formosa Oficial6 de junho de 2011 17:25

    Legal o tuto, simples e direto!

    Dá uma passadinha no meu blog tbm, tem moda, maquiagem, saúde e bem-estar, horoscopo, noticias dos famosos, promoções e mt mais:
    www.mariaformosa.blogspot.com

    ResponderExcluir
  9. Liah,você arranja um jeito de solucionar todos os meus problemas,né?
    Nuunca vi blog igual HAHA
    Sabe oque eu fazia? Colocava a bordinha no cabeçalho AHSUAHSUAHSU
    eu era looouca para colocar dái,fui tentando,acho que eu fiz uns 200 cabeçalhos para dar o tamanho certo,só eu meesmo. 
    Ó-T-I-M-O *---*

    ResponderExcluir
  10. Comenatando dnv,minha amiga quer colocar nuvem assim,no cabeçalho.Que nem tem aqui,em cima das postagens,dái ela tem dois programas,o Photo Filtre e Photoscape,se der ensina agente?

    ResponderExcluir
  11. Adorei o tuto amiga *--*
    Você arrasando como sempre hehe
    Tem post novo no PG, já viu? *-*
    Beijos,
    http://paradiisegirls.com

    ResponderExcluir
  12. Da pra fazer no photofilte. Eu só fiz unir vários circulos brancos ^^

    ResponderExcluir
  13. Fernanda Moraes .9 de junho de 2011 22:55

    Adorei o tutorial, mas não consegui :\
    Sei que sou azarada!

    Beijos,
    www.fearlessworld-blog.blogspot.com

    ResponderExcluir
  14. ooie, ameei o toutorial....mas, você poderia postar um toutorial de como eu deixo as bordas do cabeçalho arredondadas tambem? pleasee....beijoos


    wheneverfearless.blogspot.com

    ResponderExcluir
  15. misspenelope-teen24 de junho de 2011 14:33

    Nossa, esse tuto é incrível! É o que eu procurava há dias! *0*

    ResponderExcluir
  16. poderia me dizer onde coloca? eu não sei o lugar :(

    http://blog-garotadescolada.blogspot.com/

    ResponderExcluir
  17. somos duas ahsuhausha

    ResponderExcluir
  18. Acesso Permitido blog5 de julho de 2011 14:18

    Adorei o efeito já apliquei no meu blog! (^^)

    http://acessopermitidoblog.blogspot.com/

    ResponderExcluir
  19. Esse tuto só da pro modelo Viagem ? 
    Ah , e onde cola o codigo ?
    bjs , vlw ! '-'

    http://www.diiariodeumgaroto.blogspot.com/

    ResponderExcluir
  20. Olá Liah!  Adorei o post. Ah, e não funciona só no modelo Viagem. Acrescentei esse código acima do ]]* 

    .main-inner .fauxcolumn-right-outer .fauxcolumn-inner {  -moz-border-radius: 15px; /* Para Firefox */  -webkit-border-radius: 15px; /*Para Safari e Chrome */  border-radius: 15px; /* Para Opera 10.5+*/  margin-left: $(content.padding);  background: #FF1493;  repeat scroll top left;}O tuto seu junto com o tuto da Candy! http://s2meh.blogspot.com/2011/07/personalizar-cor-das-colunas-do-blog.html#more *-*Usei o modelo Marca d'água.Beijos!placefame.blogspot.com

    ResponderExcluir
  21. Eu sei que não funciona só no viagem, é que eu só passo o código referente á sidebar do modelo viagem, entende?
    Obg pelo comentario, fico feliz por ter ajudado =)






    Subject: [cherryliah] Re: Cherry Bomb!: Bordas arredondadas

    ResponderExcluir
  22. muito bom seu blog adoreiiii  beeijos

    ResponderExcluir
  23. Muito bom, me ajudou bastante! Parabéns pelo blog!

    ResponderExcluir
  24. Liah, tÔ tentando falar com você pelo twitter e você não responde o que houve ?

    ResponderExcluir
  25. Amei esse tuto Liah, o Cherry Bomb me ajuda muito como sempre :D

    http://dreamsofagirl-blog.blogspot.com/

    ResponderExcluir
  26. Liah, como faz para colocar a borda arredonda só em um dos lados da sidebar? beijos, http://garotadestemidadivulga.blogspot.com/

    ResponderExcluir
  27. Ola Liah,estou sempre usando seus tutos para montar meus templates rsrs',esqco as vezes a maioria dos códigos,esse td ok,achei os códigos,mais quando boto,dexa transparente,favor,tire minha duvida!

    ResponderExcluir
  28. Usei no meu blog, dá uma olhada?

    http://nut-tv.blogspot.com/

    ResponderExcluir
  29. a minha barra lateral ficou transparente :(
    O que faço Liaah?!? ='(

    ResponderExcluir
  30. Que maravilha!!!!!! Eu fiquei mais de 1 mes procurando e testando códigos pra deixar as bordas redondadas! E nunca deu certo ! O seu foi o único !!!!! haha! MUITO MUITO MUITO MUITO OBRIGADA!!!!!!Beijos Letícia www.accessoriesteen.blogspot.com

    ResponderExcluir
  31. caroline aparecida16 de janeiro de 2012 19:26

    Também não consegui :(

    ResponderExcluir
  32. Liah eu adorei mais , queria saber aonde eu boto o código ?

    ResponderExcluir
  33. nãão sou a liiiah mais,vc apagou o codigo que ela pediu para procurar,
    vou tentar explicar

    Vc tenta colocar o codigo de volta que fica normal
    ai ABAIXO do codigo que ela mandou pesquisar que por exemplo seria
    .main-inner .fauxcolumn-right-outer .fauxcolumn-inner {      (Coluna direita)
    vc cola o codigo que ela disponibilizou Ok?
    espero ter ajudado!

    ResponderExcluir
  34. Obrigada Liah \õ/ , comigo funcionou tudo direitinho ;D .

    beijos

    ResponderExcluir
  35. comigo não funcionou muito D: mas os outros tutoriais que tem aqui no Cherry está me ajudando muito a montar o meu novo blog que é o Loves-Webs novelas (:

    ResponderExcluir
  36. Nháán' Consegui pela primeira vez '3' muito obrigada...Beijocas

    ResponderExcluir
  37. Adorei o tutorial, agora eu consegui arredondar as bordas do meu blog.
    http://perfeitamenteteen.blogspot.com

    ResponderExcluir
  38. Oi tu sabe fazer um volta o top,se sabe me esnsina.

    ResponderExcluir
  39. Adorei! Deu tudo certo! Da uma passada por lá! http://explosaofofa.blogspot.com.br/

    ResponderExcluir
  40. Não consegui achar onde coloca :(

    ResponderExcluir
  41. Não tem como colocar a barra lateral do modelo Awesome INC. arredondada não?
    sweetpinksweet.blogspot.com

    Sofi

    ResponderExcluir
  42. ola td bem eu acho linda essas bordas arredondadas, mas estou tendo muita dificuldade em colocar, sigo todas suas orientaçoes mas qndo finalizo continua do msm jeito este é meu blog

    http://mulherdemaquiagem.blogspot.com.br/

    se vc puder me ajudar eu agradeço.

    ResponderExcluir
  43. Mais uma vez, me ajudou muito esse tutorial. Muito obrigada haha. Os creditos por isso estão na pagina tutorial, no meu blog.

    Xoxo.
    http://sabrinacamposc.blogspot.com.br/

    ResponderExcluir
  44. Liah Ameii a dica,já coloquei no meu blog obg!

    ResponderExcluir
  45. Awn...eu não consegui :(,mas vou continuar procurando até achar uma que dê certo

    ResponderExcluir
  46. Aaaaah, eu conseguiii, ficou lindo, obrigada pelas dicas :)

    ResponderExcluir
  47. Gostei do turorial, como sempre bem explicado. Só me desanimei ao saber que era apenas para o modelo viagem y.y
    *se animando* Tudo bem, eu supero u.u

    ResponderExcluir
  48. Amei O Tuto Flor , Me Ajudou Muito ! , Voce não sabe o quanto me ajudou !
    estava procurando esse tuto u.u '' flw? , emfim ;... vlw !

    ResponderExcluir
  49. Muito Obrigada Flor ,seu blog vem me ajudado muito
    Bjus

    ResponderExcluir
  50. Nossa Liah me ajudou bastante obrigada !

    ResponderExcluir
  51. Faz um tutorial de como você (s) muda (m) o Layout do Blog.

    Obrigado !

    ResponderExcluir
  52. Eu tava prescisando para o modelo Simples, tinha como vc colocar esse pfv ¿ :C

    ResponderExcluir
  53. Amei o seu blog, tá me ajudando muuuito!!!
    http://blognerdcom.blogspot.com.br/

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...