CSS3 border-radius et IE...

Bonjour à tous !
J'ai une petite question à laquelle je n'ai pas pu trouver de réponse, partout il semblerait que ça ne pose pas problème mais chez moi, si...


Je réalise actuellement un site internet qui doit être compatible avec tous les navigateurs récents : la charte comprend des arrondis à un seul coin et pour alléger mes pages, je souhaite utiliser la propriété CSS3 border-radius qui apparemment, devrait être bien supportée y compris par IE9+.

Cette propriété est appliquée sur des images.

-moz-border-radius:50px 0 0 0;
	-webkit-border-radius:50px 0 0 0;  
	-khtml-border-radius:50px 0 0 0; 
	border-radius:50px 0 0 0;

Sous Firefox et Chrome tout fonctionne, par contre avec IE le coin arrondi ne s'affiche pas.
Du coup pour tester, j'ai mis :

border-radius:50px;

et là, même sous IE, tous les coins sont bien arrondis.

border-top-left-radius: 10em;

Ne fonctionne pas non plus avec IE...

Seulement, je ne veux que le coin en haut à gauche en arrondi : arrondis différents pas supportés par IE ?

Avez-vous une idée et / ou solution ? Je ne sais pas quoi faire pour obtenir ce résultat, nul part je ne trouve de réponse à ma question

Merci !!
Modifié par marion90123 (22 Jul 2013 - 18:56)

en fait à force de tester j'ai fini par trouver d'où vient le problème, apparemment pour que le border-radius fonctionne il faut d'abord qu'il y ait une bordure.
Du coup j'ai mis :

border:1px solid transparent;
border-top-left-radius: 50px;

Mais ce n'est pas idéal car du coup j'ai un petit décalage à cause de la bordure d'1 px.
Est-ce normal et y a-t-il une autre solution ? sinon j'ajuste avec la bordure transparente, mais c'est un peu du bidouillage...

Quel est l'ensemble des regle CSS appliqué a cet element ?
est ce qu'il est possible de reproduire ce bug sur une page simple ou un editeur en ligne genre: codepen.io, jsfiddle.net, http://liveweave.com/ ou autre ?

Bonjour gc-nomade !


C'est en testant le code "à part" que j'ai pu voir que ça ne fonctionne que quand il y a le border 1px (#test1 dans mon exemple) pour IE. Ce problème ne concerne que quand les coins ne sont pas tous arrondis pareil (#test3 avec tous les coins arrondis marche sans problème).

#test1 : fonctionne avec tous les navigateurs
#test2 : fonctionne avec tous les navigateurs sauf IE
#test3 : fonctionne avec tous les navigateurs

page test ici : http://liveweave.com/plTHwL

Du coup la seule solution que j'ai pu trouver c'est de mettre cette bordure en transparent, mais ce n'est pas très clean, une autre idée peut-être ? c'est étrange car il me semblait que ce n'était pas obligatoire qu'il y ait une bordure et que c'était bien supporté même par IE...

En effet, je n'avais jalais remarqué ce défaut.

Tu peut tester avec des valeurs trop petite pour qu'elle soit dessiner mais forcer le calcul.

border-radius: 50px 0.1px 0 0;

http://liveweave.com/ntiJVi