[Resolvido] Link com borda na imagem

Dá uma olhada aqui:

http://www.brunodulcetti.com/blog/2008/01/03/hover-avancado-com-bordas-em-imagens.html

O cara que fez o efeito para o site da globo.

http://www.google.com.br/search?rlz=1C1GGLS_pt-BRBR343BR343&sourceid=chrome&ie=UTF-8&q=globo+imagem+hover+borda

poxa, legal...

mas ele explica como fazer um unico link com uma unica cor, eu preciso criar no máximo 3 com cores diferentes

Aí terá que trabalhar com id, class ou herença (efeito cascata). ;)

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

obrigado Thiago, mas você teria algum exemplo?

Posta o HTML dessas três partes para eu ver como fazer da melhor forma.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

ae galera.... pesquisei muito, porem acabei descobrindo sozinho, fui mais pela lógica e acabei descobrindo...

gostaria de compartilhar com vcs....

obrigado pela ajuda de todos...

/link laranja/

* { border: 0; }

a.img_laranja, img {

	overflow: hidden;
	float: left;
}

	a.img_laranja:hover {
 border: 4px solid #ff800e;
}

	a.img_laranja:hover img {
	margin: -4px;
}

/link vermelho/

* { border: 0; }

a.img_vermelho, img {

	overflow: hidden;
	float: left;
}

	a.img_vermelho:hover {
 border: 4px solid #983400;
}

	a.img_vermelho:hover img {
	margin: -4px;
}

/link verde/

* { border: 0; }

a.img_verde, img {

	overflow: hidden;
	float: left;
}

	a.img_verde:hover {
 border: 4px solid #006501;
}

	a.img_verde:hover img {
	margin: -4px;
}

Parabéns! a idéia é essa.

A idéia do fórum, é movimentar idéias, se te déssemos o código pronto, você não aprenderia :lol:

Apenas 'resumindo', oque você fez:

Não há necessidade de repetir declarações como * { ... }

* {

	border: 0;
}

	overflow: hidden;
	float: left;
}

	margin: -4px;
}

	border: 4px solid #ff800e;
}

	border: 4px solid #983400;
}