Bordas com imagem nas CSS3

Publicado em: 25/11/2009

No dia 17 de dezembro de 2009 o Módulo Backgrounds e Borders das Recomendações para a CSS3 passou ao status de Candidato a Recomendação do W3C. Até o dia em que escrevi está matéria dos 47 (quarenta e sete) módulos previstos nas CSS3 apenas oito deles alcançaram este estágio que é o terceiro entre cinco até que seja atingido o estágio final de Recomendação do W3C. Nesta matéria comentarei as funcionalidades para definição de bordas com imagem previstas naquele Módulo.

As especificações para o Módulo Background e Borders no seu item 5 que trata deste assunto e intitula-se "Bordas com imagens" diz o seguinte:

Os autores podem criar uma imagem para ser usada como um estilo de borda. Neste caso o formato da borda será constituído com porções extraídas dos cantos e das laterais da imagem. Cada porção da imagem será devidamente recortada, aumentada, diminuida e/ou alongada de modo a preencher a área destinada a borda.

Imagem modular

Extrair porções da imagem e tratá-las devidamente implica em que se construa as imagens destinadas a bordas de forma modular para possibilitar uma consitente manipulação dos módulos pelos mecanismos internos das CSS. Observe a seguir uma típica imagem construída para ser aplicada como borda.

Imagem modular para bordas

Trata-se de uma imagem construída com nove módulos de 15x15px. Para facilitar o entendimento da maneira como o mecanismo das CSS funcionam ao manipular uma imagem para bordas vamos identificar os diferentes mólulos conforme descrito a seguir:

  • Cantos: são as quatro estrelas vermelhas com fundo amarelo.
  • Borda superior: é o quadrado amarelo com fundo vermelho na parte superior da figura.
  • Borda lateral direita: é o quadrado amarelo com fundo azul à direita.
  • Borda inferior: é o quadrado amarelo com fundo vermelho na parte inferior da figura.
  • Borda lateral esquerda: é o quadrado amarelo com fundo azul à esquerda.
  • Conteúdo: é o quadrado central transparente.

Se você deseja definir a cor de fundo do box no qual será aplicada a borda com regras CSS salve sua figura de modo a preservar a transpârencia do módulo central (GIF com tranparência alpha ou PNG transparente), pois como veremos é ali que será inserido o conteúdo do box.

Com uso de uma só figura podemos obter vários efeitos de bordas, pois como diz a especificação a imagem será "recortada, aumentada, diminuida e/ou alongada de modo a preencher a área destinada a borda."

Aqui podemos fixar um princípio básico da construção de bordas com imagens:

Imagens destinadas a servir como bordas de elementos HTML devem ser contruídas em forma de uma matriz de 3x3, portanto com 9 módulos, não necessariamente de dimensões iguais.
Cada módulo será posicionado em dos cantos e nas laterais do box, destinando-se o módulo central à área de conteúdo do box.
Maujor

Propriedades CSS3 para bordas com imagens

A seguir uma tabela contendo um resumo das propriedades previstas para a inserção de imagens como bordas de boxes.

  Valores Valor inicial Aplica-se %
border-image-source nenhum | <imagem> nenhum (1) Não
border-image-slice [<número> | <porcentagem>](1,4) && fill 100% (1) (2)
border-image-width [<length> | <porcentagem> | <número> | auto]{1,4} 1 (1) (2)
border-image-outset [<length> | <número]{1,4} 0 (1) Não
border-image-repeat [stretch | repeat | round}{1,2} stretch (1) Não
border-image <border-image-source> || <border-image-slice> [ / <border-image-width>? [ / <border-image-outset> ]? ]? || <border-image-repeat> (3) (3) Não

(1) - Aplica-se a todos os elementos com exceção dos elementos internos das tabelas quando border-collapse é collapse.
(2) Refere-se às dimensões da área para a borda.
(3) Ver propriedades individuais.
Nenhuma das propriedades é herdada e todas são para mídia visual.

A finalidade de cada uma destas propriedades é descrita a seguir.

border-image-source
Define o endereço da imagem.
border-image-slice
Define como a imagem será recortada para ser distribuída nas bordas.
border-image-width
Define a espessura das bordas para inserção da imagem.
border-image-outset
Define uma área externa à área da borda para onde a imagem será deslocada.
border-image-repeat
Define como se dará a repetição da imagem.
border-image
Declaração abreviada para as anteriores.

Suporte

No dia que escrevi esta matéria nenhum navegador oferecia suporte para estas novas propriedades das CSS3. Contudo as engines Gecko e Webkit nas suas versões mais recentes (não testei as anteriores) oferecem suporte parcial com uso dos seus prefixos proprietários para propriedades CSS denominados -moz- e -webkit- respectivamente.

Assim, você poderá começar suas experiências e ir estudando desde já como criar bordas com imagens. Contudo convém notar algumas restrições ao suporte proprietário conforme descritas a seguir. Ressalto contudo que tais restrições não estão documentadas (pelo menos eu não encontrei nada) e se baseiam unicamente em minhas experimentações e testes. Por isso, podem conter falhas. Se você detectar alguma delas, por favor, informe na área de comentários ou mande um email para maujor[AT]maujor{PT]com. Considere que os testes foram realizados para o Firefox 3.6.3, Chrome 4.1.249.1045 e Safari 4.0.5 para Windows. Se houver mais suporte em futuras versões sinta-se à vontade para informar nos comentários.

Restições ao suporte proprietário

As restrições listadas são válidas para ambas as engines citadas.

  1. Não há suporte para as declarações individuais. Use as declarações abreviadas -moz-border-image e -webkit-border-image
  2. Não há suporte para o valor space da propriedade border-image-repeat. Covém notar que a especificação é dúbia com relação a este valor pois enquanto ele é citado na descrição de valores para a propriedade é omitido na expressão da sintaxe geral.
  3. Mesmo na declaração abreviada não há suporte para -moz-border-image-outset e -webkit-border-outset

Exemplos práticos

Vamos examinar a seguir alguns exemplos práticos para termos uma ideia dos princípios de aplicação e utilidade de estilizar bordas com imagens. Nos exemplos que mostrarei será usado o prefixo -moz- para servir o navegador Firefox. Se você usa navegador com engine webkit, basta trocar o prefixo.

Todos os exemplos mostrados nesta matéria podem ser visualizados nesta página de testes.

Observe a seguir um exemplo para esclarecer a sintaxe, atualmente suportada, para aplicação de imagem como borda.

-moz-border-image: url("/imagens/borda.png) 15 15 15 15 / 15px 20px 30px 40px round stretch;

Na sintaxe mostrada informamos que a imagem encontra-se na pasta imagens na raiz do site e tem o nome de borda.png. A seguir informamos que a imagem deve ser recortada em 15px para distribição ao longo das bordas. Os quatro valores são declarados com número puro (não há a unidade) e se referem as bordas top left bottom e right respectivamente. Segue-se uma barra(/) e quatro valores em medida CSS para especificar as espessuras das bordas. Finalmente dois valores indicando a repetição, o primeiro para as bordas superior e inferior e o segundo para as bordas laterais. Notar que pelo menos até agora as especificações não preveem declaração do valor de repetição para cada uma das bordas individulamente e sim duas a duas.

Notar a ausência dos 4 valores para a propriedade border-image-outset, pois como já frizamos ela não é suportada.

Seguem os exemplos. Mostramos a regra CSS e uma imagem da renderização. Forneço ainda uma página contendo todos os exemplos em funcionamento nos navegadores citados. Todos os exemplos usam a imagem mostrada anteriormente e um DIV com dimensões fixas e cor de fundo cinza claro.

Exemplo 1

.div1a {
	border-image: url('borda.png') 15 / 15px round;
  }
.div1b {
	border-image: url('borda.png') 15 / 15px repeat;
  }
.div1c {
	border-image: url('borda.png') 15 / 15px stretch;
  }
.div1d {
	border-image: url('borda.png') 15 / 15px  round  stretch;
  }
.div1e {
	/* esta div não está a vista, apenas reserva espaço */
  }
.div1f {
	border-image: url('borda.png') 15 / 15px stretch  round ;
  }

Renderização

renderização do exemplo1

Notar a diferença entre os valores round e repeat para a declaração border-image-repeat (em destaque na figura). A engine webkit não faz esta diferenciação (possivelmente uma falha na implementação da especificação)

Exemplo 2

.div2a {
	border-image: url('borda.png') 15 / 15px 20px 30px 40px round;
  }
.div2b {
	border-image: url('borda.png') 15 / 20px 40px round ;
  }
.div2c {
	border:15px groove #c30;
	border-image: url('borda.png') 15 round;
  }

Renderização

renderização do exemplo2

Notar que a declaração de uma borda com a propriedade border das CSS2 faz com que navegadores que não entendam CSS3 ou se por um motivo qualquer a imagem para a borda não for carregada a renderização da borda será segundo aquela declaração. Assim é de boa prática fazer declaração segundo as CSS2 ainda que exista a declaração de espessura de borda com border-image-width.

Exemplo 3

.div3a {
	border:15px groove #c30;
	border-image: url('borda.png') 45 / 15px round;
  }
.div3b {
	border:45px groove #c30;
	border-image: url('borda.png') 45 / 45px round;
  }
.div3c {
	border: groove #c30;
	border-width: 15px 45px;
	border-image: url('borda.png') 45 / 15px 45px round;
  }

Renderização

renderização do exemplo3

Notar a diferença de renderização entre as engines Gecko e Webkit. Aqui o Firefox falhou não acatando a declaração para repetir a borda.

Este exemplo 3 visa apenas a mostrar a versatilidade da propriedade border-image e fornecer dados para que você possa analisar e concluir sobre a finalidade de cada declaração. Evidentemente a imagem usada não foi construida para os valores declarados no exemplo, mas oferece opções bem interessantes. Você não acha?

Meu nome é Maurício Samy Silva e eu sou conhecido na Web como Maujor.

Mantenho o Site do Maujor hospedado em: maujor.com e meu e-mail de contato é maujorcss[ARROBA]maujor [PT]com.

Minha residência é em:

Copacabana - Rio de Janeiro,, RJ - - Brasil