Bordas em imagem

Eu sempre preferi usar fundo branco e nunca me preocupei em editar o fundo das imagens, pois, seja branco ou não, quase sempre combina! Agora, como o fundo do tema deste blog é cinza, as imagens com fundo branco, na minha opinião, não ficam tão legais. Então, busquei uma forma de adicionar bordas nas imagens que não me agradam, sem precisar editá-las. Quem conhece HTML e CSS pode fazer isso facilmente! Alguns valores que podemos usar são:

• 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 do border-style. Uma ótima referência é 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" />

Borda grossa:

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

Borda tracejada:

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

Borda entalhada:

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

Borda dupla:

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

É isso! Agora vocês já sabem como colocar bordas nas imagens.

Tags Devlog