Bordas arredondadas nas colunas

Clique em Editar HTML. Cole no seu template, antes de ]]>:


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

}

#sidebartop{
background:url("link da imagem da base da coluna") no-repeat left bottom;
margin:0 0 px;
padding:0 0 0px;
}


Salve o template. Se você visualizar, não verá nenhuma mudança (não insira ainda nenhum link de imagem onde está indicado, por enquanto). Agora encontre este trecho do código (não é necessário clicar em Expandir Modelo de Widget) e insira o que está em vermelho:

<div id='sidebar-wrapper'>
<div id='sidebartop'><div id='sidebarbottom'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div></div></div>

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:

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 uma das imagens (ou, com muito azar, ambas) esteja desalinhada e seja preciso fazer alterações no valor de padding. Vá alterando valores (5px, 10px) e visualizando, até se alinharem. Lembre-se de que a visualização no Firefox não é a mesma do Internet Explore, por isso teste pelo menos nestes dois principais navegadores.