🖼️ Gerador de Borda com Imagem CSS3 (Border-Image Studio)
Estúdio visual completo: faça upload da sua própria imagem ou use molduras geométricas SVG em tempo real
Esta caixa de demonstração utiliza a propriedade nativa border-image calculada em tempo real pelo navegador.
/* Gerando CSS... */
📑 Índice do Conteúdo
Como Criar Molduras e Bordas Decorativas com `border-image` em CSS3
A propriedade `border-image` do CSS3 é um dos recursos mais sofisticados do design web moderno, permitindo utilizar qualquer imagem gráfica ou vetor para criar molduras ornamentadas, botões com efeito de gema, caixas estilo cyberpunk e caixilhos decorativos que se expandem dinamicamente acompanhando o tamanho do conteúdo.
O Gerador de Borda com Imagem do Web-ZoneWare simplifica a complexa sintaxe da propriedade ao fornecer controles deslizantes visuais em tempo real para fatiamento (slice), largura da borda (width), expansão externa (outset) e modos de repetição (repeat, round, stretch e space), com geração imediata do código CSS compatível.
Entendendo o Mecanismo de Fatiamento (9-Slice Grid)
A propriedade border-image-slice divide a imagem de referência em uma grade de 9 regiões através de 4 linhas de corte (superior, direita, inferior e esquerda):
| Região da Grade | Comportamento na Borda | Impacto Visual |
|---|---|---|
| 4 Cantos (Corners) | Permanecem estáticos nas 4 extremidades | Não sofrem distorção ao redimensionar a caixa |
| 4 Bordas (Edges) | Repetidas ou esticadas nos 4 lados da caixa | Acompanham o crescimento da largura e altura conforme o modo repeat |
| 1 Centro (Middle) | Descartado por padrão ou preenchido com a palavra-chave fill |
Se ativo, preenche o fundo central do container como background |
Sintaxe Canônica da Propriedade CSS3
.elemento-moldura {
border: 20px solid transparent;
border-image-source: url('moldura.svg');
border-image-slice: 30 fill;
border-image-width: 20px;
border-image-outset: 0px;
border-image-repeat: round;
}
Perguntas Frequentes sobre Border-Image em CSS (FAQ)
Por que é obrigatório declarar `border: X solid transparent;` antes do `border-image`?
Porque a propriedade border-image depende da existência de uma área de borda física reservada no modelo de caixa (Box Model) do elemento. Declarar uma borda sólida transparente reserva o espaçamento necessário para que a imagem seja desenhada.
Qual é a diferença entre os modos de repetição `round` e `repeat`?
O modo repeat simplesmente repete a imagem fatiada em blocos sucessivos, podendo cortar a imagem ao meio na junção com o canto. O modo round redimensiona sutilmente cada azulejo para que caiba um número exato e inteiro de repetições, eliminando fatias cortadas.
O que faz o parâmetro `fill` na fatia da borda?
Por padrão, o miolo central da grade de 9 fatias é descartado para que o fundo do seu texto fique transparente. Ao marcar a opção “fill”, o centro da imagem original é preservado e desenhado como fundo do conteúdo.
Esta propriedade funciona em todos os navegadores modernos?
Sim. A especificação border-image é suportada em 100% dos navegadores atuais (Chrome, Safari, Firefox, Edge, Opera e versões móveis do iOS e Android).
