---
title: "Como adicionar bordas a uma imagem no Markdown"
slug: "how-to-add-borders-to-an-image-in-markdown"
description: "Format you images by adding borders to them in the Markdown editor using this simple Hack. "
tags: ["Images", "Customization"]
updated: 2026-06-22T08:58:57Z
published: 2026-06-22T08:58:57Z
canonical: "docs.document360.com/how-to-add-borders-to-an-image-in-markdown"
---
> ## Documentation Index
> Fetch the complete documentation index at: https://docs.document360.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Como adicionar bordas a uma imagem no Markdown
O editor Markdown não tem uma forma embutida de adicionar bordas às imagens. A solução alternativa é usar a tag HTML `<img>` com a `border` propriedade CSS dentro do `style` atributo, que o editor Markdown do Document360 renderiza corretamente.
---
## Quando usar bordas de imagem
- **Capturas de tela com fundos brancos ou claros** — uma borda cria uma borda visível entre a imagem e a página, impedindo que a imagem se misture ao fundo.
- **Capturas de tela ou diagramas da interface** — uma borda fina dá à imagem uma aparência limpa e contida, o que funciona bem para documentação técnica.
- **Agrupamento ou ênfase** — uma borda separa visualmente uma imagem do conteúdo ao redor e sinaliza que ela é um elemento distinto que vale a pena examinar.
Use as bordas com moderação. Aplicá-las em cada imagem reduz seu efeito e pode fazer com que os artigos pareçam bagunçados.
NOTA
Essa técnica só funciona no **editor Markdown**. No editor WYSIWYG, use a opção de alternar a borda no painel de configurações de imagem.
---
## Compreendendo a propriedade da fronteira
A `border` abreviação CSS define três valores nesta ordem:
| Valor | O que ele controla | Exemplo |
| --- | --- | --- |
| Largura | Espessura da linha de fronteira | `2px` |
| Estilo | Aparição da linha de fronteira | `solid`, `dashed`, `dotted` |
| Cor | Cor da borda — qualquer nome de cor CSS ou código hexadecimal | `grey`, `#000000` |
---
## Referência rápida
Substitua `YOUR_IMAGE_URL`, `YOUR_ALT_TEXT`, e os valores da borda pelos seus requisitos.
```
```
Para personalizar a borda, ajuste a largura, o estilo e a cor:
```
```
NOTA
O cinza é uma das cores de borda mais usadas junto com o preto, pois funciona bem tanto contra fundos claros quanto escuros. Substitua `grey` por qualquer nome de cor CSS válido (por exemplo, `blue`, `green`, `yellow`) ou um código hexadecimal para combinar com seu design.
---
## Como adicionar uma borda a uma imagem no Markdown
1. Abra o artigo desejado no portal da Base de Conhecimento.
2. Cole o trecho abaixo no local onde você quer que a imagem apareça.
```
```
1. Substitua `YOUR_IMAGE_URL` pela URL da sua imagem.
2. Substitua `YOUR_ALT_TEXT` por uma breve descrição da imagem para maior acessibilidade.
3. Ajuste a largura, estilo e cor da borda conforme necessário — veja a [tabela de referência das propriedades da borda](/docs/pt/how-to-add-borders-to-an-image-in-markdown#understanding-the-border-property) acima.
---
## Desfecho
### Sem fronteiras
### Com fronteira
NOTA
Você pode combinar uma borda com uma sombra na mesma imagem usando ambas as propriedades CSS do `style` atributo. Veja [Como adicionar sombras a uma imagem no Markdown](/help/docs/pt/how-to-add-shadows-to-an-image-in-markdown) para a sintaxe das sombras.
## Related
- [Como alinhar a imagem no Markdown](/how-to-align-the-image-in-markdown.md)
- [Como adicionar acordeão no Markdown](/how-to-add-accordion-in-markdown.md)
- [Como adicionar espaço extra no Markdown](/how-to-add-extra-space-in-markdown.md)
- [Como alinhar o texto no Markdown no centro](/how-to-center-align-the-text-in-markdown.md)
- [Como adicionar sombras a uma imagem no Markdown](/how-to-add-shadows-to-an-image-in-markdown.md)
- [Como mudar a cor do texto no Markdown](/how-to-change-the-color-of-the-text-in-markdown.md)