Criar um Site Grátis Fantástico
Bordas arredondadas diversas

Eu vi que muitas de vocês utilizam aquele código que deixa todos os cantos com as bordas arredondas e não sei se vocês já perceberam mas ele fica com uma "fendinha" entre a coluna e a área da postagem (olhe ali na imagem), pois bem, hoje vim ensinar a deixar somente os cantos "externos" arredondados, os de fora sabe?

bordas Arredondadas diversas

Eu vou disponibilizar 3 códigos de borda (na verdade são 6, 2 para cada tipo hihi), um vai ser para deixar só o topo do blog com os cantos arredondados (onde começam a coluna e a área da postagem) outro para deixar só a parte de baixo (onde terminam a coluna e a área da postagem) e outro para deixar ambas as partes com cantos arredondados.
Então vou deixar os códigos e após isso como aplica-los no seu HTML.

Para deixar só o topo do blog com os cantos arredondados:

Somente o topo arredondado

Código para arredondar a área da postagem:

-webkit-border-top-left-radius: 20px;

-moz-border-radius-topleft: 20px;

border-top-left-radius: 20px;

 Código para arredondar as colunas:

-webkit-border-top-right-radius: 20px;

-moz-border-radius-topright: 20px;

border-top-right-radius: 20px;

Para deixar só a parte de baixo do blog com os cantos arredondados: 

Somente a parte de baixo arredondado

Código para arredondar a área da postagem:

-webkit-border-bottom-left-radius: 20px;

-moz-border-radius-bottomleft: 20px;

border-bottom-left-radius: 20px;

 Código para arredondar a coluna:

-webkit-border-bottom-right-radius: 20px;

-moz-border-radius-bottomright: 20px;

border-bottom-right-radius: 20px;

Para deixar todos os cantos externos arredondados:                                                                                          

Todos os cantos externos arredondados

Código para arredondar a área da postagem:


-webkit-border-top-left-radius: 20px;

-webkit-border-bottom-left-radius: 20px;

-moz-border-radius-topleft: 20px;

-moz-border-radius-bottomleft: 20px;

border-top-left-radius: 20px;

border-bottom-left-radius: 20px;

 Código para arredondar a coluna:


-webkit-border-top-right-radius: 20px;

-webkit-border-bottom-right-radius: 20px;

-moz-border-radius-topright: 20px;

-moz-border-radius-bottomright: 20px;

border-top-right-radius: 20px;

border-bottom-right-radius: 20px;
Importante: Caso sua coluna seja do lado esquerdo inverta os códigos, use o código referente a área da postagem na coluna e o código referente a coluna use na área do post ok?


Como aplicar no seu HTML:      

                                                                                                                                                                                   Vá em Design > Editar HTML e pesquise por: 

.main-inner .column-center-outer {
logo abaixo terá o seguinte código:  _background-image: none;
então cole ABAIXO dele o código de borda que você escolheu, referente a área da postagem.

Após pesquise por:
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {    (caso sua coluna seja no lado direito)
e se sua coluna for no lado esquerdo pesquise por:
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
logo abaixo terá o seguinte código:
background:$(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left; então cole logo ABAIXO dele o código de borda que você escolheu, referente a coluna.                                   
Caso você não ache os códigos procure pela parte que se refere a área do post e da sidebar e faça os mesmos procedimentos. Quem desenrola um pouco mais pode criar outros modelos de borda usando esse site aqui.