Como Deixar as Bordas das Postagens com os Cantos Arredondados?

CONSIDERAÇÕES INICIAIS

Alguns modelos de temas do Blogger, como o Awesome, deixam as bordas das postagens com os cantos perpendiculares, além disso, não disponibilizam de ferramentas nativas para personalizar esse detalhe. Nesse tutorial, confira como deixar as bordas das postagens do blog com os cantos arredondados, melhorando o visual do blog.

Esse tutorial é indicado para os blogs que utilizam o tema Awesome Inc. ou Espetacular Ltda na plataforma do Blogger. Para baixar um modelo desse tema, clique aqui.

Antes de realizar qualquer um dos procedimentos a seguir, primeiramente faça um backup do seu blog. Se ocorrer algum problema durante o procedimento, o blog poderá ser restaurado com o arquivo do backup realizado. Se tiver alguma dúvida sobre o backup, clique aqui.

COMO DEIXAR AS BORDAS DAS POSTAGENS COM CANTOS ARREDONDADOS?

Confira como deixar as bordas das postagens do blog com os cantos arredondados em 14 passos:

1º Passo: acesse a página inicial do Blogger.

2º Passo: selecione o nome do seu blog.

3º Passo: clique em Tema.

4º Passo: clique na seta ao lado do botão Personalizar e escolha a opção Editar HTML.

5º Passo: clique em qualquer local dentro do HTML do blog.

6º Passo: no teclado, pressione as teclas CRTL e F para abrir a caixa de pesquisa do HTML.

7º Passo: pesquise pelo trecho abaixo:

-moz-border-radius-topleft: $(date.header.border.radius.top);

Clique aqui para copiar o trecho acima.

Observação: caso não encontre o trecho acima, pesquise apenas pelo trecho: -moz-border-radius-topleft:

Dica: note que esse trecho deve estar aproximadamente umas 30 linhas abaixo de: /* Posts.

Junto ao trecho pesquisado, vai encontrar o seguinte código:

-moz-border-radius-topleft: $(date.header.border.radius.top);

-moz-border-radius-topright: $(date.header.border.radius.top);

-webkit-border-top-left-radius: $(date.header.border.radius.top);

-webkit-border-top-right-radius: $(date.header.border.radius.top);

border-top-left-radius: $(date.header.border.radius.top);

border-top-right-radius: $(date.header.border.radius.top);

Dica: note que todo código acima repete o termo $(date.header.border.radius.top).

8º Passo: no código acima, substitua o termo $(date.header.border.radius.top) pelo termo 7px.

Confira como vai ficar:

-moz-border-radius-topleft: 7px; -moz-border-radius-topright: 7px; -webkit-border-top-left-radius: 7px; -webkit-border-top-right-radius: 7px; border-top-left-radius: 7px; border-top-right-radius: 7px;

O termo $(date.header.border.radius.top) indica os atributos padrões do tema, enquanto o termo 7px arredonda os cantos da borda para uma curvatura de 07 pixel.

Dica: altere o valor 7px para aumentar ou diminuir o arredondamento das bordas.

Observação: o prefixo moz executa a função em navegadores baseados no motor Gecko, como Firefox por exemplo, enquanto o prefixo webkit executa a função em navegadores baseados no motor WebKit, como Safari por exemplo.

9º Passo: abaixo do código modificado, pesquise pelo trecho abaixo:

-moz-border-radius:

Clique aqui para copiar o trecho acima.

Dica: note que esse trecho deve estar aproximadamente umas 30 linhas abaixo do código anterior.

Observação: a pesquisa deve apresentar quatro resultados e todos eles podem ser alterados.

Junto ao trecho pesquisado, vai encontrar o seguinte código:

-moz-border-radius: $(widget.border.radius);

-webkit-border-radius: $(widget.border.radius);

-goog-ms-border-radius: $(widget.border.radius);

border-radius: $(widget.border.radius);

10º Passo: no código acima, substitua o termo $(widget.border.radius) pelo termo 7px.

Confira como vai ficar:

-moz-border-radius: 7px; -webkit-border-radius: 7px; -goog-ms-border-radius: 7px; border-radius: 7px;

11º Passo: pesquise pelo trecho abaixo:

-moz-border-radius-bottomleft:

Clique aqui para copiar o trecho acima.

Junto ao trecho pesquisado, vai encontrar o seguinte código:

-moz-border-radius-bottomleft: $(date.last.border.radius.bottom);

-moz-border-radius-bottomright: $(date.last.border.radius.bottom);

-webkit-border-bottom-left-radius: $(date.last.border.radius.bottom);

-webkit-border-bottom-right-radius: $(date.last.border.radius.bottom);

-goog-ms-border-bottom-left-radius: $(date.last.border.radius.bottom);

-goog-ms-border-bottom-right-radius: $(date.last.border.radius.bottom);

border-bottom-left-radius: $(date.last.border.radius.bottom);

border-bottom-right-radius: $(date.last.border.radius.bottom);

12º Passo: no código acima, substitua o termo $(date.last.border.radius.bottom) pelo termo 7px.

Confira como vai ficar:

-moz-border-radius-bottomleft: 7px;   -moz-border-radius-bottomright: 7px;   -webkit-border-bottom-left-radius: 7px;   -webkit-border-bottom-right-radius: 7px;   -goog-ms-border-bottom-left-radius: 7px;   -goog-ms-border-bottom-right-radius: 7px;   border-bottom-left-radius: 7px;   border-bottom-right-radius: 7px;

13º Passo: clique em visualizar para conferir se a visualização do blog está correta.

A opção visualizar aparece no ícone do olho no canto superior direito da tela.

14º Passo: por fim, clique em salvar e em seguida confira o resultado no seu blog.

A opção salvar aparece no ícone do disquete no canto superior direito da tela.

COMO DEIXAR AS BORDAS DO MENU DAS PÁGINAS COM OS CANTOS ARREDONDADOS?

Para deixar as bordas do menu de navegação das páginas (blog-pager) com os cantos arredondados, acesse a opção editar HTML e realize os passos a seguir:

1º Passo: pesquise pelo trecho abaixo.

#blog-pager {

Clique aqui para copiar o trecho acima.

Umas 10 linhas abaixo do trecho pesquisado, deve localizar o seguinte código:

-moz-border-radius: $(widget.border.radius);

-webkit-border-radius: $(widget.border.radius);

-goog-ms-border-radius: $(widget.border.radius);

border-radius: $(widget.border.radius);

 

-moz-border-radius-topleft: $(pager.border.radius.top);

-moz-border-radius-topright: $(pager.border.radius.top);

-webkit-border-top-left-radius: $(pager.border.radius.top);

-webkit-border-top-right-radius: $(pager.border.radius.top);

-goog-ms-border-top-left-radius: $(pager.border.radius.top);

-goog-ms-border-top-right-radius: $(pager.border.radius.top);

border-top-left-radius: $(pager.border.radius.top);

border-top-right-radius-topright: $(pager.border.radius.top);

2º Passo: no código acima, altere os termos $(widget.border.radius) e $(pager.border.radius.top) para o termo 7px.

Confira como vai ficar:

-moz-border-radius: 7px;   -webkit-border-radius: 7px;   -goog-ms-border-radius: 7px;   border-radius: 7px;     -moz-border-radius-topleft: 7px;   -moz-border-radius-topright: 7px;   -webkit-border-top-left-radius: 7px;   -webkit-border-top-right-radius: 7px;   -goog-ms-border-top-left-radius: 7px;   -goog-ms-border-top-right-radius: 7px;   border-top-left-radius: 7px;   border-top-right-radius-topright: 7px;

3º Passo: em seguida, clique em visualizar para conferir o resultado.

4º Passo: por fim, clique em salvar.

COMO DEIXAR AS BORDAS DOS WIDGETS COM OS CANTOS ARREDONDADOS?

Para deixar as bordas dos widgets com os cantos arredondados, acesse a opção editar HTML e realize os passos a seguir:

1º Passo: pesquise pelo trecho abaixo.

-moz-border-radius: $(widget.border.radius);

Clique aqui para copiar o trecho acima.

Observação: a pesquisa deve apresentar entre dois a quatro resultados e essa alteração a seguir, deve ser realizada em todos os resultados encontrados.

Junto ao trecho pesquisado, vai encontrar o seguinte código:

-moz-border-radius: $(widget.border.radius);

-webkit-border-radius: $(widget.border.radius);

-goog-ms-border-radius: $(widget.border.radius);

border-radius: $(widget.border.radius);

2º Passo: no código acima, altere o termo $(widget.border.radius) para o termo 7px.

Confira como vai ficar:

-moz-border-radius: 7px; -webkit-border-radius: 7px; -goog-ms-border-radius: 7px; border-radius: 7px;

3º Passo: pesquise pelo trecho abaixo:

.sidebar .widget {

Clique aqui para copiar o trecho acima.

Junto ao trecho pesquisado, vai encontrar o seguinte código:

.sidebar .widget {

  font: $(widget.font);

  color: $(widget.text.color);

}

4º Passo: clique antes da última chave “}” e pressione a tecla enter para adicionar uma linha em branco acima dessa chave.

5º Passo: Na linha em branco inserida acima da chave, insira o código abaixo.

-moz-border-radius: 7px;

-webkit-border-radius: 7px;

-goog-ms-border-radius: 7px;

border-radius: 7px;

Clique aqui para copiar o código acima.

Confira como o código era inicialmente:

.sidebar .widget {   font: $(widget.font);   color: $(widget.text.color); }

Confira como vai ficar:

.sidebar .widget {   font: $(widget.font);   color: $(widget.text.color);   -moz-border-radius: 7px;   -webkit-border-radius: 7px;   -goog-ms-border-radius: 7px;   border-radius: 7px; }

6º Passo: em seguida, clique em visualizar para conferir o resultado.

7º Passo: por fim, clique em salvar.

CONSIDERAÇÕES FINAIS

Portanto, esse tutorial visou compartilhar um pouco de nossos conhecimentos sobre como arredondar os cantos das bordas das postagens do blog que utilizam o tema “Awesome”, contribuindo para aperfeiçoar o visual do blog.

 

TUTORIAIS RELACIONADOS

 

Por: Santos. Elaborado em: 09/01/2026. Publicado em: 09/01/2026. Atualizado em: 09/01/2026. Obrigado pela sua atenção, qualquer dúvida, falha ou sugestão, deixe seu comentário ou entre em contato conosco.