Bordas em imagem

Eu sempre preferi fazer uso de fundo branco e nunca me preocupei em editar um fundo de imagem, seja ele branco ou não quase sempre combina! Agora como o fundo do tema deste blog é cinza as imagens que tem fundo branco na minha opinião não fica legal. Então busquei um método de colocar borda nas imagens que não me agradam sem ter que edita-las, quem conhece html e css faz isto rapidamente! Alguns valores que podemos usar:

• dashed : borda tracejada
• dotted : borda pontilhada
• double :borda dupla
• groove : borda entalhada
• inset : borda em baixo relevo
• outset :borda em alto relevo
• solid :borda contínua
• ridge : borda em ressalto

Consulte o site w3.org para ver diversas funções border-style uma ótima referencia é o site maujor neste tutorial de borda Vejamos abaixo alguns exemplos: Borda sólida:

<img style="border:1px solid black" src="http://www.seusite.com.br/suaimagem.jpg" width="230" height="169" alt="imagem borda sólida" />

Veja o exemplo do código:

Borda grossa:
<img style="border:20px solid #000000" src="http://www.seusite.com.br/suaimagem.jpg" width="230" height="169" alt="imagem borda grossa" />

Veja o exemplo do código:

Borda tracejada:
<img style="border:2px dashed red" src="http://www.seusite.com.br/suaimagem.jpg" width="230" height="169" alt="imagem borda tracejada" />

Veja o exemplo do código:

Borda entalhada:
<img style="border:4px Grooved black" src="http://www.seusite.com.br/suaimagem.jpg" width="230" height="169" alt="imagem borda entalhada" />

Veja o exemplo do código:

Borda dupla:
<img style="border:4px double black" src="http://www.seusite.com.br/suaimagem.jpg" width="230" height="169" alt="imagem borda dupla" />

Veja o exemplo do código:

É isso agora já sabem como colocar borda nas imagens.