come devo fare per ottenere che l'immagine con link abbia un bordo che da tratteggiato cambi colore e diventi solid al passaggio del mouse?

Ho provato questo css:

.imgLink a:link {border:1px dotted #ffff00}
.imgLink a:visited {border:1px dotted #ffff00}
.imgLink a:hover {border:1px solid #ff0000}

ma funziona solo nel preview del programma (topstylepro).
sbaglio forse a richiamarlo con class="imgLink" nel tag <a>?
ho provato a dare dimensioni 0 al border dell'immagine, ma ottengo solo di far scomparire il bordo blu del link che la circonda.
Inoltre: questo css come si comporterebbe con Mac?

ciao