Border-radius + border sur image = pas de border-radius sur le border

Vous n'avez rien compris ? C'est normal, qu'elle idée d'appeler tout ça "border" aussi !

En gros mon soucis (si s'en est un) se situe au niveau de la propriété border-radius associée à une bordure sur une image. Comme du code vaut mieux que 1000 explications :

#nomdeladivparente img {
border : 1px solid #787878;
border-radius : 10px;
}

Problème : l'effet de border-radius s'applique bien sur l'image, mais pas sur la bordure ! C'est un peu gênant voyez-vous.
Est-ce un comportement normal ou bien y'a-t-il un truc qui coince quelque part ? J'ai eu beau chercher sur le net, je n'ai rien trouvé en parlant (en même temps avec deux propriétés s'appelant border, je ne trouve pas grand chose).
Modifié par Billou (21 Sep 2010 - 22:25)

je ne comprend pas bien le problème, le "border" est bel et bien arrondi :

http://img842.imageshack.us/img842/3520/sanstitrerw.jpg

ce n'est pas ce genre de résultats auxquels tu t'attendais ?


edit: screenshots pris sous CHROME 6
(effectivement, sous firefox, je n'arrive pas à mettre des border radius sur une image donc voici le premier résultat google pour tenter de résoudre ton problème : http://stackoverflow.com/questions/1347796/firefox-moz-border-radius-wont-crop-out-image)
Modifié par bogs (21 Sep 2010 - 23:23)

J'ai bel et bien le même résultat que tu obtiens dans l'image de droite.

Or si tu regardes bien, le border ne suit pas les coins arrondis de l'image (on le voit mieux avec une bordure dans une couleur plus criarde sur fond sombre).

En gros ça fait comme si on avait passé une gomme sur les bords de l'image, mais ayant pour effet d'effacer la bordure sur les coins. Ou alors la bordure passe sous l'image.

Après peut-être que c'est normal, c'est pour ça que je venais demander.

J'ai personnellement réussi à contourner le problème car mon image est entourée d'un lien. J'ai donc appliqué la bordure et le border-radius sur le lien, et là ça fait bel et bien une vraie bordure arrondie autour de l'image.
Mais c'est quand même con de devoir produire un code de vicieux pour arriver à ce résultat.
Modifié par Billou (22 Sep 2010 - 00:07)

Billou a écrit :
J'ai bel et bien le même résultat que tu obtiens dans l'image de droite.

Or si tu regardes bien, le border ne suit pas les coins arrondis de l'image (on le voit mieux avec une bordure dans une couleur plus criarde sur fond sombre).

En gros ça fait comme si on avait passé une gomme sur les bords de l'image, mais ayant pour effet d'effacer la bordure sur les coins. Ou alors la bordure passe sous l'image.

Après peut-être que c'est normal, c'est pour ça que je venais demander.

J'ai personnellement réussi à contourner le problème car mon image est entourée d'un lien. J'ai donc appliqué la bordure et le border-radius sur le lien, et là ça fait bel et bien une vraie bordure arrondie autour de l'image.
Mais c'est quand même con de devoir produire un code de vicieux pour arriver à ce résultat.

en même temps, pour une image, tu la découpes au préalable avec toshop.

Je suis d'accord, mais pas si tu cherches à réduire le poids des images !

Pour les images que j'utilise : bords arrondis = png = environ 90ko ! Sans bords arrondis de base, du jpeg en qualité 80 = 30ko.

Maintenant qu'on a le Deux Ex Machina qu'est CSS3 pour réduire le poids des pages de manière simple, autant l'utiliser. C'est pour ça que j'étais assez déçu du résultat quand on veut y mettre une bordure.
Modifié par Billou (22 Sep 2010 - 02:42)

Billou a écrit :
Je suis d'accord, mais pas si tu cherches à réduire le poids des images !

Pour les images que j'utilise : bords arrondis = png = environ 90ko ! Sans bords arrondis de base, du jpeg en qualité 80 = 30ko.

Maintenant qu'on a le Deux Ex Machina qu'est CSS3 pour réduire le poids des pages de manière simple, autant l'utiliser. C'est pour ça que j'étais assez déçu du résultat quand on veut y mettre une bordure.

re, désolé, j'avais un peu oublié ton sujet !
bon, la solution que je vois dans ce cas, c'est de rajouter un div en dessous de ton image tout simplement ! (si tu connais sa taille à l'avance) autrement ... bah je sais pas, j'suis trop fatigué pour réfléchir ce soir.

Y'a pas de soucis, comme je disais j'ai réussi à faire ce que je voulais de manière pas trop dégueu. C'était juste pour savoir si c'était un comportement normal de border-radius ou pas.