A propriedade "border-radius" é responsável por muitos arredondamentos de bordas. Graças a ele, é possível criar bordas arredondas, que alem de ser possível arrendondar alguns elementos, ela serve para caixas de textos personalizáveis.

1. Faça o login no Blogger e clique em nova postagem, logo depois clique em HTML dentro do editor de postagens.

Navegadores que suportam o border-radius:

Veja os Browsers que suportam esta propriedade:

● Firefox 3.0 ou superior

● Flock 2.5 ou superior

● Chrome

● Opera

●Safari

Não funcionam nos navegadores:

● Internet Explorer

● Opera versão inferior a 10.

Lembrando que ensinarei como colocar uma(ou várias) caixas no post, e código do seletor(que será adicionado no elemento). E como viram acima o Internet Explorer não suporta(óbvio).

● Bordas arredondadas em todas as esquinas:

Pré-visualização:

Este efeito você visualiza, se você não estiver usando o Internet Explorer.

Código para o post:

<div style="background:#6959CD;color:#fff; border: #000 5px solid;padding: 10px;border-radius:20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;">Digite seu texto.</div>

Código para seletor:

border-radius:20px;

-moz-border-radius: 20px;

-webkit-border-radius: 20px;

● Bordas arredondadas em alguns lados:

Pré-visualização:

Este texto você visualiza com as bordas arredondadas, se você não estiver usando o Internet Explorer.

Código para o post:

<div style="background:#9B30FF; color:#fff; border: #68228B 10px solid; padding: 10px; -moz-border-radius:0 20px;-webkit-border-radius:0 20px;border-radius:0 20px;">Este texto você visualiza com as bordas arredondadas, se você não estiver usando o Internet Explorer.</div>

Código para seletor:

-moz-border-radius:0 20px;

-webkit-border-radius:0 20px;

border-radius:0 20px;

● Bordas arredondadas somente nas pontas de cima:

Pré-visualização:

Este texto você visualiza com as bordas arredondadas, se você não estiver usando o Internet Explorer.

Código para o post:

<div style="background:#6959CD;color:#fff; border: #000 1px solid;padding: 10px;border-radius:10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0;">Este texto você visualiza com as bordas arredondadas, se você não estiver usando o Internet Explorer.</div>

Código para seletor:

border-radius:10px 10px 0 0;

-moz-border-radius: 10px 10px 0 0;

-webkit-border-radius: 10px 10px 0 0;

Para entender melhor o código e não fazer nenhuma "gambiarra", preste atenção não explicação:

<div style="background:#xxx -->(cor de fundo); color:#xxx -->(cor do texto); border: #xxx(cor da borda) Xpx(espessura da borda) solid; padding: 10px; border-radius:10px; -->(tamanho do raio da curva de cada borda) -moz-border-radius: 10px; -webkit-border-radius: 10px;">SEU TEXTO</div>

Aplicando este efeito diretamente na folha de estilos do Blogger

Para não ficar só no copiando e colando o código, você pode utilizar um código que quando adicionado na folha de estilos do Blogger(]]></b:skin>), será colocado somente um pequeno código para que o seu template reconheça que você quer o determinada caixa.

1. Clique na guia Modelo e clique no botão Editar HTML.

2. Pressione Ctrl+F para abrir o Localizador de seu navegador e procure a tag:

]]></b:skin>

3. Acima desta tag, cole o código CSS, fazendo as modificações de acordo com seu gosto.

#borda-arredondada{-moz-border-radius: 10px; /*-- para Firefox e Flock --*/-webkit-border-radius: 10px; /* para Chrome e Safari --*/border-radius: 10px;border: 1px solid #000000; /*--- Edite cor e espessura da borda ---*/}

4. Quando você quiser adicionar a caixa de texto dentro de seu post, cole o código:

<div id='borda-arredondada'>SEU TEXTO</div>

Pronto! Assim fica fácil você colocar sua caixa de texto em seu post, caso você não queira usar o blockquote. Mas também tem como personalizar o blockquote de sua maneira, veja o post abaixo: