chrome border-radius image + border

Bonjour,

je n'arrive pas à arrondir les angles d'une image et en plus de lui appliquer une bordure ; voici mon code :

Code:

---

1 2 3 4 5 6 7

.maincontainer img { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 2px solid #E6E6E6; }

---

ça fonctionne très bien sous firefox mais pas sous chrome... une idée de pourquoi ??

Merci !

Bonjour et bienvenue sur DVP.

border-radius est jeune, CSS3, qui est pris en compte de façons différentes suivant les navigateurs, voire leur version.

A toi donc de faire quelque choses qui soit le plus acceptable ;)

Effectivement comme le dit Nosmoking, les arrondis sont du css3 et ne sont pas reconnus par tous les navigateurs; c'est le cas de IE et Opera.
Mais sous Chrome, cela doit fonctionner.
Toutefois, la valeur de border-radius s'exprime en em (souvent 1em) plutôt qu'en px.

Citation:

---

Envoyé par miss_socrates

les arrondis sont du css3 et ne sont pas reconnus par tous les navigateurs; c'est le cas de IE et Opera.

---

J'ai pu constater que border-radius fonctionne très bien sous Opera 11 (peut-être même avant) et IE 9.

Citation:

---

Toutefois, la valeur de border-radius s'exprime en em (souvent 1em) plutôt qu'en px.

---

Non. Les unités relatives (pourcentage, em, ex) sont préférables aux unités absolues en terme d'accessibilité, mais border-radius accepte aussi bien n'importe quelles valeur et unité.