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.
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.
<img src="YOUR_IMAGE_URL" alt="YOUR_ALT_TEXT" style="border: 2px solid grey;">
Para personalizar a borda, ajuste a largura, o estilo e a cor:
<!-- Thicker black border -->
<img src="YOUR_IMAGE_URL" alt="YOUR_ALT_TEXT" style="border: 4px solid black;">
<!-- Dashed blue border -->
<img src="YOUR_IMAGE_URL" alt="YOUR_ALT_TEXT" style="border: 2px dashed blue;">
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
- Abra o artigo desejado no portal da Base de Conhecimento.
- Cole o trecho abaixo no local onde você quer que a imagem apareça.
<img src="YOUR_IMAGE_URL" alt="YOUR_ALT_TEXT" style="border: 2px solid grey;">
- Substitua
YOUR_IMAGE_URLpela URL da sua imagem. - Substitua
YOUR_ALT_TEXTpor uma breve descrição da imagem para maior acessibilidade. - Ajuste a largura, estilo e cor da borda conforme necessário — veja a tabela de referência das propriedades da borda acima.
Desfecho
Sem fronteiras
Com fronteira
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 para a sintaxe das sombras.