De maneira resumida, border-image é um atributo que nos ajudará a aplicar novos estilos às caixas com CSS, através da utilização de imagens nas bordas dos elementos, inclusive podendo escolher várias imagens para várias das partes das bordas.
Colocar imagens nas bordas é uma tarefa que já se costuma realizar no webdesign, e para isso, costuma-se utilizar complementarmente técnicas com as linguagens HTML e CSS. Ou seja, no momento de escrever este artigo, para que um elemento da página, como pode ser uma divisão ou uma tabela, parágrafo, etc., tenha uma borda a partir de uma imagem, se necessita colocar algum código HTML adicional, com algum container que nos permita logo definir estilos CSS para "imitar" essa borda de imagem. De qualquer forma, estejamos ou não familiarizados com as técnicas de uso de imagens nas bordas, o importante é que com CSS 3 vamos poder fazer isso mesmo simplesmente escrevendo alguns novos atributos aos elementos que desejarmos.
Para as pessoas que desejem encontrar de primeira mão as especificações dos atributos para colocar borda nas imagens, recomendamos a leitura do site da W3C.
Rascunho de trabalho sobre as propriedades de borda de imagem. Novembro de 2002
Rascunho sobre borda de imagem. Dezembro de 2009
Como se poderá ver, existem bastantes diferenças e é que também passou bastante tempo entre uma e outra especificação. Ademais, a mais atual das duas tem umas explicações baseadas em esquemas muito mais entendíveis.
Do mesmo modo, temos acesso às especificações que colocaram em andamento os mais avançados navegadores, que implementam já de maneira experimental alguns dos atributos para criar bordas nas imagens.
Site para desenvolvedores de Mozilla, sobre Border Image.
Site para desenvolvedores de Mac e seu navegador Safari.
Por exemplo, teríamos este elemento HTML:
<div id="camadaborda">
Vou colocar uma borda acima
</div>
E agora poderíamos aplicar estilos para criar uma borda na imagem:
#camadaborda{
-moz-border-image: url(sello.png) 2 2 2 2 stretch stretch;
-webkit-border-image: url(sello.png) 2 2 2 2 stretch stretch;
padding:20px;
width: 100px;
}
Como se pode ver, os atributos para bordas de imagens não têm o nome definitivo, que será border-image, e sim uns próprios para cada um dos navegadores que implementam esta nova característica de CSS 3. O atributo -moz-border-image é para o navegador Firefox e outros produtos da companhia Mozilla e o atributo -webkit-border-image é para qualquer navegador baseado em WebKit, como Safari ou Chrome.
A imagem que estamos utilizando como borda é a seguinte:
E o exemplo se pode ver em andamento em uma página à parte, porém lembre-se que dependendo do seu navegador poderá ver ou não a borda da imagem.
Entretanto, segundo a última especificação de CSS 3, temos os seguintes atributos:
border-image-source: Para indicar a URL da imagem que vamos utilizar como borde.
border-image-slice: Indica o espaço da imagem que será visível como borda, nos quatro lados do elemento, ou seja, top, right, bottom e left.
border-image-width: Para indicar a largura da borda.
border-image-outset: Serve para indicar a área na que a imagem de borda se estende mais da área do elemento, nos 4 lados da mesma.
border-image-repeat: Permite marcar se se deseja ou não que se repita a imagem da borda fazendo um mosaico ou se se deseja que se estique, etc.
border-image: Utiliza-se como uma maneira resumida de especificar vários atributos de borda com imagens ao mesmo tempo.
Explicar com exemplos cada um destes atributos seria sem dúvida interessante, porém nos levaria vários artigos e ademais, vale a pena fazê-lo quando já estejam disponíveis como especificação definitiva de CSS 3 e não em um simples rascunho, assim como quando estejam implementados nos navegadores.
