Wonderland ♥: Bordas arredondadas somente nos cantos externos

Bordas arredondadas somente nos cantos externos


Olá cupcakes de menta !!!! Como vocês vão? Eu vou bem, muito bem !!!!! Bom, hoje irei mostrar para vocês como arredondar as bordas externas do blog!!! 

Ex.:

Preparados????  Go!!!!!!

Como aplicar?

1.  Vá em Design Editar HTM procure por: .main-inner .column-center-outer {

2. Logo abaixo terá o seguinte código: background-image: none; , cole abaixo o código de borda que você escolheu, referente a área da postagem.

3. Depois de tudo isso, pesquise este código : .main-inner .fauxcolumn-right-outer .fauxcolumn-inner { (para o lado DIREITO)

4. Pesquise este código: .main-inner .fauxcolumn-left-outer .fauxcolumn-inner { (para o lado ESQUERDO)

Abaixo terá o seguinte:  
background:$(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left; , então você irá colar abaixo dele o código de borda que escolheu, refernte á coluna!!!!


  Os código:

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

         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;



2. Para deixar só a 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 coluna:

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

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


border-bottom-right-radius: 20px;


3.  Para deixar 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;



Atenção:  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, certo?!?!?!


             
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 "este site!!!


Espero que tenha gostado!!!!

Beijos!

Nenhum comentário:

Postar um comentário