Adicione bordas, molduras Polaroid ou barras 1:1 e 4:5 para redes sociais, com cor sólida ou fundo desfocado, tudo no navegador.
Uma borda resolve três problemas distintos, e cada um pede um modo diferente. Expandir a tela aumenta as dimensões finais e cerca a imagem original inteira com a cor da borda, é o modo para emoldurar de verdade, tipo galeria ou Polaroid. A margem interna mantém as dimensões originais e reduz a imagem para dentro da borda, com escala uniforme nos dois eixos, para que a proporção nunca seja achatada, útil quando o tamanho de saída precisa permanecer o mesmo. E a moldura social preenche uma foto retangular até uma proporção alvo (1:1, 4:5, 16:9) com barras de cor ou uma cópia desfocada da própria imagem, que é como se publica uma paisagem no Instagram sem cortar as bordas. Tudo é desenhado localmente com a Canvas API; a imagem não é enviada a nenhum servidor.
No modo expandir, a imagem original fica 100% preservada e ganha uma moldura ao redor: se a foto tem 1000×800 e você aplica uma borda, o arquivo final fica maior que 1000×800. É o modo certo quando você não quer perder nada do conteúdo, o clássico enquadramento de foto.
No modo margem interna, as dimensões finais são iguais às originais: a borda é pintada sobre a faixa externa da própria imagem, cobrindo uma parte dela. É o modo para quando o tamanho de saída precisa ser exatamente o mesmo, por restrição de um layout ou de um slot de tamanho fixo.
Exemplo 1, moldura estilo galeria: uma foto clara sobre um site de fundo branco some nas bordas. Uma borda cinza-clara ou preta fina no modo expandir separa a imagem do fundo e dá um acabamento de "quadro".
Exemplo 2, catálogo uniforme: para deixar produtos com aparência consistente, aplique a mesma cor e espessura de borda (proporcional) em todas as fotos. Uma borda branca no modo expandir sobre fundo branco cria um respiro (margem) padronizado ao redor de cada produto.
A espessura é definida em porcentagem da menor dimensão da imagem, e não em pixels fixos. Isso é proposital: 5% gera uma borda visualmente equivalente tanto numa miniatura quanto numa foto enorme, sem precisar recalcular o valor para cada imagem.
O formato de saída segue o uso: para uma borda de cor sólida, JPG resolve e gera arquivo menor; se a imagem tinha transparência que você quer manter fora da borda, escolha PNG. Para molduras com cantos arredondados ou transparência, a ferramenta de arredondar cantos é a mais indicada, pois exporta PNG com canal alfa.
Cole o código no seu HTML e a ferramenta aparece na sua página, sem a navegação e sem os anúncios do J-Kit. Ela continua rodando no navegador de quem visita o seu site.
<iframe
src="https://jkit.tools/embed/pt-BR/adicionar-borda"
width="100%"
height="600"
style="border:0"
loading="lazy"
title="Adicionar Borda à Imagem"
></iframe>Expandir aumenta as dimensões finais e cerca a imagem inteira com a borda. Margem interna mantém as dimensões originais e reduz a imagem para caber dentro da borda, preservando a proporção (nada é achatado). Moldura social preenche a foto até uma proporção alvo (1:1, 4:5, 16:9) com barras de cor ou uma cópia desfocada, calculando margens assimétricas.
A borda é aplicada inteiramente no seu navegador. Nenhuma imagem é enviada a qualquer servidor.