Ads Top

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

Veja o exemplo do código:
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" />

Veja o exemplo do código:
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" />


Veja o exemplo do código:
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" />

Veja o exemplo do código:
imagem borda dupla
É isso agora já sabem como colocar borda nas imagens.

Um comentário:

Cada comentário é apreciado, mas tenha em mente que os comentários são moderados e podem levar algum tempo para aparecer. Todos os comentários de spam serão excluídos.

Tecnologia do Blogger.