Inserir bordas arredondadas nas colunas

Não quero desanimar, mas já vou avisando que dá um trabalho danado, viu? Estou devendo este tuto faz um tempo justamente por que sei que não é nada fácil colocar bordas arredondadas (também não é coisa prá se arrancar os cabelos....) e tenho medo do que virá...rsrs. Quando ensinei a colocar uma terceira coluna no blog, achei que estava facilitando a vida do povo, mas recebí TANTO e-mail, acabei ajeitando TANTO template, que tenho medo.... Não que eu tenha má vontade gente, por favor, mas é que eu ando mesmo, ultimamente, sem muito tempo para me dedicar a este blog e aos outros tantos filhos (vou contar pela centésima vez: eu tenho 26 blogs!), que dirá tempo para ajeitar templates. É por isso que eu já ensino a pescar...Por isso, meus amores, sem mágoas, mas vou adiantando que a titia vai ensinar tin-tin por tin-tin, mas depois é fé em Deus e cada um por sí, ok?
Também quero dizer que vou explicar o MEU método, que aprendí na marra, xeretando os templates do blogger. Deve ter por aí milhões de tutos explicando de maneiras diferentes, mas eu não lí nenhum e posso até estar fazendo do jeito mais difícil, não sei...

Chega de preâmbulos, vamos ao que interessa.

Vá no seu blog e clique em Editar HTML. Procure no código do seu template este trecho:

/* Sidebar Content
----------------------------------------------- */
COLOQUE O CÓDIGO AQUI

.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
text-align: center;
margin: 15px;

}

Pode não estar idêntico ao meu mas o título é o mesmo. Ok, acima de tudo que estiver por lá, onde eu sinalizei com a frase em vermelho, você deve colar estre trecho:

#sidebarbottom-wrap1 {
background:url("endereço da imagem do topo da coluna") no-repeat left top;
margin:0 0 px;
padding-top:10px;

}

#sidebarbottom-wrap2 {
background:url("endereço da imagem do bottom da coluna") no-repeat left bottom;
margin:0 0 px;
padding-bottom: 10px;
}

Tá, agora esquece esta parte por enquanto. Note bem: não delete nada, só acrescente o código, ok?
Salve o template. Se você visualizar, não terá mudado nada (não insira ainda nenhum endereço de imagem onde está indicado, por enquanto). Agora desmarque onde está Expandir Modelo de Widget (se estiver marcado) e encontre este trecho do código e insira o que está em vermelho:

Salve o template. Agora é com a parte de edição de imagem. Abra seu editor de imagem e crie uma imagem com a largura da sidebar e altura 100px. Preencha com a cor que será a cor do background da PÁGINA (e não da coluna, ok?).

Depois de preencher com a cor de fundo da página do seu blog, escolha a seleção com bordas arredondadas do seu editor de imagem.

Veja a imagem (clique nela para expandir):


Agora selecione o quadrado como na próxima imagem e preencha a seleção com a cor que usará no fundo da SIDEBAR:



Ficou aquela pontinhas alí com a cor do fundo da página, ok? Agora corte a imagem próximo ao final desta curva da borda (mas não vá cortar demais, heim?)
Salve esta imagem como top.jpg:





Agora inverta a imagem Verticalmente e salve como bottom.jpg:



Bom, agora hospede as imagens e insira lá no primeiro código que eu passei, dentro das marcações correspondentes para topo e bottom. Visualize. Pode ser que esteja tudo fora de lugar e aí é que vem a dor de cabeça. Eu mesma não encontrei a receita mágica prá dar certo de primeira. Quando não dá, vou alterando os valores que estão em padding e margin até dar certo. Prá isso não tenho uma resposta pronta, eu mesmo apanho sempre. Por que? Porque a visualização no Firefox, geralmente, é perfeita de primeira, mas a porcaria (é, porcaria...) do Internet Explore tem a mania de acabar com a minha festa. Ou seja, tá lindo em um e tudo torto no outro. Prá conciliar ambos, leva uns bons minutos.

Gente, é isso. É muito simples, é mais uma enganação para os olhos. A imagem tá lá e não se vê por que ela tem a mesma cor do fundo. Se você cismar de mudar o background da página depois, tem que mudar as imagens. Não se esqueça de trocar a cor da sidebar pela cor que vc escolheu e colocou na imagem. Se você quiser preencher tudo com uma pattern por exemplo, é a mesma coisa, só que vai ter que ir lá no código da coluna da sidebar e colocar:

background: url('endereço da imagem do corpo da sidebar') repeat;

A imagem do 'corpo' da coluna óbviamente tem que ser a mesma que preenche as bordas, ok? Corte uma 'fatia fina' da pattern (ou imagem) que usou para as bordas, salve, hospede e coloque onde eu indiquei aí em cima.
Dúvidas nesta parte (onde tá esse código da coluna?) é só dar uma espiadinha no post sobre alterações nas colunas do template.

Sabia que ia sair um livro. Espero que tenham entendido, por que eu me acho a pessoa mais confusa do mundo prá explicar. Boa sorte à todos.

Abraços!