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">


Leia Também

Deixe seu comentário

15/05/2011 ・ 01:07

bem, eu uso tumblr e estou tentando colocar borda com foto no fundo da imagem e segue a mesma coisinha assim, usa html, css, mas eu não tô conseguindo não pega, pode tentar me ajudar? obrigada (: :19:

    15/05/2011 ・ 09:57

    Não uso thumblr, não sei como funciona.

27/09/2011 ・ 13:54

Estou com muita dificuldade para entender como funciona isso. Eu tentei e não deu certo.