Bordas arredondadas somente nos cantos externos no blog

Esse tutorial é ótimo para quem ama layout estilo caixa como nesse layout aqui. Eu irei ensinar como aplicar bordas arredondadas (ver aqui) no modelo o deixando gracioso e um detalhe a mais para os que amam um blog detalhado! Vou ensinar como aplicar nele todo ou somente em algumas partes, os créditos vão para o blog Wonderland, pelas imagens ilustrativas. 

Isso é muito fácil irei mostrar alguns modelos possíveis de bordas aplicadas, depois basta escolher o modelo e aplicar na área escolhida, seja postagem ou sidebar. O tutorial estará mais abaixo. 

Topo do blog com os cantos arredondados:

Código para arredondar a área da postagem:

Códigos

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

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

border-top-left-radius: 20px; 

Código para arredondar a sidebar:

Códigos

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

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

border-top-right-radius: 20px;

Parte de baixo do blog com os cantos arredondados:

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 sidebar:

Códigos

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

Todos os cantos externos arredondados:

Código para arredondar a área da postagem:

Códigos

-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 sidebar:

Códigos

-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;

Aplicando

Escolha qual blog deseja aplicar depois em Layout >> HTML. Ao abrir o HTML. 

1. Se deseja aplicar bordas na postagem procure por:

Códigos

> .main-inner .column-center-outer {

Após o trecho background-image: none;, escolha um dos modelos acima e cole.

2. Se deseja aplicar na sidebar direita, procure por:

Códigos

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {

Após o trecho background:$(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;, escolha um dos modelos acima e cole. 

3. Se deseja aplicar na sidebar esquerda, procure por:

Códigos

.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {

Após o trecho background:$(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;, escolha um dos modelos acima e cole.