Adicionar borda a uma imagem
Adicione borda colorida, espaçamento interno, cantos arredondados e sombra a qualquer imagem no navegador, com fundo externo transparente ou colorido.
Executa totalmente no seu navegador. Seus dados nunca são enviados.
O que é Borda em imagem?
Esta ferramenta emoldura uma imagem com uma borda sólida de qualquer largura e cor, espaçamento interno opcional em outra cor, cantos arredondados e uma sombra suave. A área fora da moldura pode ficar transparente (útil com cantos arredondados e sombras) ou ser preenchida com uma cor de fundo.
Como usar Borda em imagem
- Solte, escolha ou cole uma imagem.
- Defina a Largura da borda e a Cor da borda e, opcionalmente, o Espaçamento interno com sua cor.
- Acrescente Raio dos cantos e um Tamanho da sombra / deslocamento, se quiser.
- Mantenha Transparente fora da borda ou escolha uma cor de fundo e baixe (o PNG mantém a transparência).
Exemplo
40×20 image, border 20 px #ff00ff, no padding, radius 0
80×60 PNG whose top-left pixel is #FF00FF
Quando usar Borda em imagem
Use-a para destacar capturas de tela em documentos, adicionar uma borda branca estilo “impressão” às fotos ou criar imagens arredondadas e com sombra para posts e slides. Use saída PNG quando quiser cantos arredondados ou sombras transparentes; o JPEG os preenche com branco.
Como funciona Borda em imagem
É criado um novo canvas maior que a imagem em duas vezes a borda mais o espaçamento, mais o espaço para a sombra. Um retângulo arredondado é preenchido com a cor da borda (com as configurações de sombra do canvas quando a sombra está ativa), um retângulo arredondado interno é preenchido com a cor do espaçamento e a imagem é desenhada recortada pelo retângulo arredondado mais interno, então o raio dos cantos também se aplica à foto.
Casos de Uso Comuns
- Adicionar uma moldura branca a fotos para um post no Instagram.
- Dar uma borda cinza fina às capturas de tela da documentação.
- Criar imagens arredondadas no estilo de ícone de app com sombra.
- Adicionar espaçamento uniforme ao redor de imagens de produtos.
Nota de Segurança
As imagens são decodificadas, processadas e codificadas localmente no seu navegador com a Canvas API. Nada é enviado a um servidor.
Perguntas Frequentes
Por que meus cantos arredondados ficam brancos?
O JPEG não consegue guardar transparência. Escolha PNG ou WebP como formato de saída para manter cantos e sombras transparentes.
Como o tamanho da saída é calculado?
Largura = largura da imagem + 2 × (borda + espaçamento), mais espaço extra de cada lado quando a sombra está ativa. A altura funciona da mesma forma.
Posso usar uma borda semitransparente?
Os campos de cor aceitam cores HEX de 6 dígitos, então as bordas são opacas. Defina a borda como 0 e use só o espaçamento se precisar de uma moldura que combine com o seu fundo.