---
url: "/pt/emailify/design/borders.md"
description: "Aplique bordas aos elementos do layout e insira linhas divisórias entre as camadas de conteúdo."
---

# Adicionar bordas e divisores aos layouts de e-mail

> Aplique bordas aos elementos do layout e insira linhas divisórias entre as camadas de conteúdo.

## Adicionar contornos de borda aos elementos do layout {#adding-border-strokes-to-your-layout-elements}

[Video](/assets/videos/emailify/design/adding-borders.mp4)

Para adicionar uma borda sólida a camadas (por exemplo, Row, Column, Button etc.) dos seus designs de e-mail, clique na camada e aplique um contorno (stroke) do Figma a ela. Ele é incluído automaticamente como borda CSS no HTML final exportado pelo Emailify.

Para criar um espaço entre a borda e o conteúdo interno da camada, considere [aplicar padding](/pt/emailify/design/padding) a essas camadas depois de aplicar a borda.

> **Warning:** Atenção: **os clientes de e-mail não são compatíveis com bordas em gradiente**. Se você usar um preenchimento em gradiente no contorno do Figma, a exportação HTML final usará a primeira cor sólida do gradiente.

## Adicionar linhas divisórias entre as camadas de conteúdo {#adding-divider-lines-between-your-content-layers}

[Video](/assets/videos/emailify/design/add-divider-lines.mp4)

Se precisar adicionar uma linha divisória entre camadas de conteúdo dentro de uma Column dos seus layouts de e-mail, adicione um elemento divisor especial do Emailify: clique na camada “Column”, selecione o item “Divider” no menu suspenso Quick Add na parte de baixo do plugin e clique no botão **Add +** para inserir a camada da linha divisória na Column.

Depois que a camada divisória for adicionada à Column, arraste e solte a camada no painel de camadas para mudar entre quais camadas ela fica. Depois, ajuste o tamanho dela alterando a **Height** da camada no painel de propriedades da camada no Figma, ou ajuste a cor de fundo mudando o **Fill** da camada no Figma para qualquer cor sólida.

> **Warning:** Atenção: **os clientes de e-mail não são compatíveis com bordas em gradiente**. Se você usar um preenchimento em gradiente no divisor, a exportação HTML final usará a primeira cor sólida do gradiente.

### Adicionar padding interno às camadas de linha divisória {#adding-inner-padding-to-your-divider-line-layers}

[Video](/assets/videos/emailify/design/divider-padding.mp4)

Se quiser, adicione padding interno aos divisores: selecione uma camada divisória do Emailify no e-mail com o painel **Settings** aberto, ative a opção **Inner Padding** e adicione os valores de padding que quer aplicar à camada divisória selecionada.

Isso adiciona um padding “interno” extra dentro da camada divisória quando ela é renderizada em HTML, o que permite definir valores de padding para determinadas camadas de texto da Column sem afetar as outras camadas.

> **Tip:** Se quiser, você também pode substituir o padding de qualquer camada divisória do Emailify no celular ativando a opção **Mobile Padding** e adicionando os valores de padding que quer aplicar à camada divisória selecionada. Eles só aparecem quando o e-mail HTML é visualizado no celular.

## Adicionar raio de borda aos fundos dos elementos do layout {#adding-border-radius-for-backgrounds-to-your-layout-elements}

[Video](/assets/videos/emailify/design/column-border-radius.mp4)

Se a sua Row ou Column tem um preenchimento de fundo (sem contorno), você pode arredondar os cantos do fundo clicando na camada e definindo um valor de arredondamento com a propriedade **Corner Radius** no Figma.

> **Note:** Atenção ao conteúdo baseado em imagem. Se você aplicar no celular um raio de borda menor que o do desktop, a imagem é exportada como um JPG quadrado para preservar toda a área da imagem. Isso permite aplicar o raio menor no celular, mas significa que o raio não fica embutido no PNG. Por isso, o Outlook exibe a imagem com cantos retos, já que não é compatível com o border radius do CSS.

> **Warning:** Atenção: **os clientes de e-mail não são compatíveis com raio de borda em contornos**. Se você usar raio de borda em um elemento de layout que tenha um contorno do Figma, a exportação HTML final usará bordas quadradas, sem arredondamento.

### Observações importantes sobre raio de borda com contornos {#important-notes-on-using-border-radius-with-strokes}

O raio de borda funciona de forma confiável em qualquer camada **Column** que também tenha um contorno aplicado. Mas ele não funciona em camadas **Row**, porque elas são tabelas HTML (que, infelizmente, não são compatíveis com raio de borda em contornos).

Infelizmente, [o raio de borda não é compatível](https://www.caniemail.com/features/css-border-radius/) com nenhuma versão do Outlook, então esses clientes sempre usam cantos retos, independentemente da configuração.

Para obter os melhores resultados, aplique o arredondamento diretamente na camada **Column** do Emailify que tem o contorno, e não em uma Row ou Wrapper, lembrando que os cantos arredondados _não_ aparecem em nenhuma versão do Outlook.