Tutoriais  12/09/2006 

Borda em imagens

É muito mais fácil e prático fazer as bordas das suas imagens com css, assim você não precisa editar a foto apenas para colocar a borda.

01. Coloque o seguinte código no seu css:

.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
padding: 6px;
text-align: center;
background-color: #ffffff;
border: 1px solid #dbdbdb;
}
.alignleft{
float: left;
margin: 1px 4px 0 0;
padding: 6px;
background-color: #ffffff;
border: 1px solid #dbdbdb;
}
.alignright{
float: right;
margin: 1px 0 0 4px;
padding: 6px;
background-color: #ffffff;
border: 1px solid #dbdbdb;
}
.alignnone{
margin: 1px 4px 0 0;
padding: 6px;
background-color: #ffffff;
border: 1px solid #dbdbdb;
}

02. Para que suas imagens apareçam com bordas use:

Para imagem com borda centralizada:

<img src="http://www.suaimagem.jpg" class="aligncenter" alt=""/>

Para imagem com borda alinhada à esquerda:

<img src="http://www.suaimagem.jpg" class="alignleft" alt=""/>

Para imagem com borda alinhada à direita:

<img src="http://www.suaimagem.jpg" class="alignright" alt=""/>

Para imagem com borda sem alinhamento:

<img src="http://www.suaimagem.jpg" class="alignnone" alt=""/>

03. Se quiser que o fundo da sua borda tenha uma imagem, substitua background-color: #ffffff; por background-image: url (http://www.imagem.com);

04. Para que a borda funcione corretamente no internet explorer, você tem que substituir

<html>
<head>

Por

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">


30/06/2009 ・ 17:27

Oi, amei as dicas, mas sou meio leiga, posso colocar esse código no post quando postar a imagem?Porque esse css é japonês pra mim. Obrigada e tomara que vc posssa responder, pois sempre vi essa borda e queria saber como fazer.

30/06/2009 ・ 18:29

A parte do css você vai colocar no html do seu layout, depois da tag style.

15/07/2009 ・ 20:52

Obrigada Tamara!Poxa eu me qebrava pra achar isso ;/
espero que tudo esteja bem
beijinhos :*
:9:

09/09/2009 ・ 18:52

Até existe, mas vai colocar borda em todas as imagens, se é isso que vc quer, é só usar dentro de img no css.

Beatriz
09/09/2009 ・ 18:11

Olá Tamara 🙂 Antes de mais, parabéns pelo seu site.
Gostaria muito de usar este código, mas existe alguma maneira de o colocar a funcionar para todas as imagens no meu site?

Beijinhos de Portugal <3

30/06/2010 ・ 17:36

legal de mais :32:

13/07/2010 ・ 08:44

Tamara vc sempre me salva com suas dicas! Parabéns!!!!!!!!
BJUS!

01/10/2010 ・ 23:55

Fico lindo nas imagens do meu novo widget! Thx a lot honey

Ps.: Conheço teu site desde 2007… (:

:8:

Tuanny
27/10/2010 ・ 14:18

Olá flor!

Como faço pra tirar a borda?
beejo :*

28/10/2010 ・ 07:20

Adiciona ao css: border:0px;