Problème de bordure avec des bord arrondi sous Chrome et Opéra

Bonjour,

J'applique sur une image(de forme carré) des bord arrondi de façon à la rendre ronde puis une bordure.
sous Firefox tout va bien mais sous chrome la bordure ne suit pas les bord arrondi et sous Opéra, l'image sort carrément du bord arrondi. j'ai essayer de mettre mon image dans un container et de lui appliquer le style de mon image mais ça ne change rien.
avez vous une solution ?

voici un screenshot et le code :

<div id="map">
  <img src="images/madagascar.jpg"/>
</div>

#map img{
    border: 5px solid #8fb935;
    display: block;
    width: 402px;
    height: 402px;
    overflow: hidden;
    
    -moz-border-radius:206px;
    -webkit-border-radius:206px;
    border-radius:206px;
}

merci de votre aide
Modifié par spout (12 Sep 2011 - 10:19)

Bonjour.

Si tu le peux, utilise plutôt le background en css.

<div id="map"></div>

#map{
    background:url("images/madagascar.jpg") 50% 50% no-repeat;
    border: 5px solid #8fb935;
    display: block;
    width: 402px;
    height: 402px;
    overflow: hidden;

    -moz-border-radius:206px;
    -webkit-border-radius:206px;
    border-radius:206px;
}

Comme ça, ça fonctionne sous Opera et Chrome.
Modifié par SolidSnake (12 Sep 2011 - 10:49)

bonne idée, j'ai aussi pensé à cette solution mais je ne pense pas que ce soit possible (je vais toutefois demander à mon dev).
J'ai refait des test en appliquant mon style a la div #map et j'ai réussi à faire fonctionner cette effet sous Chrome et doublant le border-radius sur la div et sur l'image :

#map {
    border: 5px solid #8fb935;
    display: block;
    width: 402px;
    height: 402px;
    overflow: hidden;
    
    -moz-border-radius:206px;
    -webkit-border-radius:206px;
    border-radius:206px;
}

#map img{
    -moz-border-radius:206px;
    -webkit-border-radius:206px;
    border-radius:206px;
}

Malheureusement ça ne fonctionne toujours pas sous Opéra qui laisse toujours déborder l'image.