All for Joomla All for Webmasters

Bordas com imagem em CSS

Esse efeito provavelmente só funciona no Google Chrome.

Cole o código abaixo antes da tag </style> de seu HTML.

.caixa {
border-image: url('http://sugar-dance.org/images/background-primadonna2.gif') 5 / 5px  round;}
-moz-border-image: url('http://sugar-dance.org/images/background-primadonna2.gif') 5 / 5px  round;}
-webkit-border-image: url('http://sugar-dance.org/images/background-primadonna2.gif') 5 / 5px  round;}

Se você quiser colocar mais detalhes nesse CSS, coloque-os logo abaixo da primeira linha (.imgborda {), se não, pode não funcionar! Cole o código no seu HTML exatamente como ele se encontra aqui.

Logo após isso, para usar o efeito, é só adicionar o código abaixo no seu HTML aonde quiser:

<div class="caixa">texto</div>

Dúvidas? Ask-me!