Como arredondar bordas via CSS

A melhor forma de arredondar as bordas de qualquer parte do template é fazendo imagens com cantos arredondados, pois fazer isso via código CSS pode dar incompatibilidade em navegadores antigos que não dão suporte a versão 3.0 do CSS.

"Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento [...]"

Texto: Wikipédia

Continue lendo...

Então vou deixar bem explicado: CSS 3.0 é uma versão mais nova do “Cascading Style Sheets” e por se tratar de uma novidade, alguns códigos não são “lidos” por navegadores antigos, exemplo: Internet Explorer 8.0 ou inferior (Sim, o IE 8.0 já é antigo! Ou melhor... O IE sempre está atrás). Como a Microsoft trabalha mal no Internet Explorer (ou em quase tudo), não fique assustado se as bordas ficarem retas no IE.
Obs.: O máximo que pode acontecer é o navegador não interpretar o código diferente da velha versão. Não vai prejudicar de forma direta o resto da codificação.

Bom, o código para colocar bordas arredondadas:

-moz-border-radius: 10px; /* Para Firefox */
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Opera 10.5+*/

• Onde está 10px substitua pelo número que você quiser, pois isso define a curvatura da borda, enquanto maior o número, maior será a forma arredondada.
• Os três campos são necessários, pois cada um é usado em algum navegador diferente (Comentado acima entre /* e */)

Você pode usar o código acima dentro de uma DIV (id ou class) ou em (quase) qualquer lugar que você quiser dentro do HTML do seu blog (Blogger -> Design -> Editar HTML).

Exemplo:

#exemplo1 {
width: 400px;
height: 100px;
margin: 10px;

-moz-border-radius: 8px; /* Para Firefox */

-webkit-border-radius: 8px; /*Para Safari e Chrome */

border-radius: 8px; /* Para Opera 10.5+*/

background: #f7f7f7;
padding: 20px;
border: 1px solid #000;
color: #000;
}

Exemplo em ação:

Testes

Abraços Pessoal!