Partage
  • Partager sur Facebook
  • Partager sur Twitter

[CSS3] Arrondir les angles d'une image

Utilisation de la propriété borde-radius

Anonyme
1 juillet 2010 à 20:51:57

Bonsoir chers Zér0s !

Il se trouve que je suis en train de coder un petit site personnel dans lequel je souhaiterais que toutes les images aient les coins arrondis. Pour cela, j'utilise la propriété CSS3 border-radius, ce qui nous donne par exemple :
img {
border-radius: 4px; /* propriété CSS3 */
-moz-border-radius: 4px; /* compatibilité avec Firefox */
-webkit-border-radius: 4px; /* compatibilité avec les navigateurs Webkit */
}


Curieusement, le rendu est positif — la propriété fonctionne — sur Safari (je suis sur Mac) mais pas sous Firefox ; en ce qui concerne ce dernier, l'image est comme s'il n'y avait aucune propriété appliquée, autrement dit il n'y a pas de changements et les coins sont normaux.

Avez-vous une solution à ce problème ? La propriété border-radius ne marche-t-elle pas pour les images sour Firefox ?

Je vous remercie d'avance pour vos lumières et vous souhaite une très belle soirée estivale !

— Flavien.







  • Partager sur Facebook
  • Partager sur Twitter
1 juillet 2010 à 21:00:01

J'aurais cru que ça marcherai, la spécification dit que ça doit marcher pour tous les éléments sauf les tableaux, et sur la page développeurs faite par mozilla sur le sujet, il n'y a pas de restriction à la balise image.
Tu peux essayer (même si j'y crois pas trop) de mettre ton image dans un span ou une div, tu applique le border radius à cet élément et tu lui met un overflow:hidden;
Sinon en deuxième essaie tu peux tenter de le faire coin par coins avec les :
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft

Ou encore essaye de mettre 1em à la place de 4px
Bon courage
  • Partager sur Facebook
  • Partager sur Twitter
Anonyme
1 juillet 2010 à 22:06:10

Tout d'abord, merci pour votre réponse rapide.

J'ai essayé les différentes astuces que vous m'avez conseillées, mais malheureusement, aucune ne fonctionne…

J'ai cependant remarqué quelque chose : j'avais appliqué une ombre (toujours avec du CSS3) aux images en question ; or, en déplaçant l'image, mais pas l'ombre (grâce à un padding), j'ai remarqué que le cadre formé par l'ombre, lui, était arrondi !

Ce qui est le plus curieux, c'est que cela fonctionne parfaitement sur Safari !

Je vais continuer à chercher…

— Flavien.
  • Partager sur Facebook
  • Partager sur Twitter
1 juillet 2010 à 22:22:39

Bonjour,

img { 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -khtml-border-radius: 4px; 
    border-radius: 4px; 
}

L'ordre a peut-être une importance...
cf tuto ici http://www.alsacreations.com/tuto/lire [...] s-images.html

David
  • Partager sur Facebook
  • Partager sur Twitter
1 juillet 2010 à 22:28:19

-khtml-border-radius: 4px; ?
C'est pour quel type de nav? je ne le connaissai pas celui ci :)
  • Partager sur Facebook
  • Partager sur Twitter
Anonyme
1 juillet 2010 à 22:34:43

@djaps — Je viens d'essayer de modifier l'ordre des propriétés et ça n'a visiblement aucune incidence.

@demenvil — Il me semble que c'est pour les navigateurs de Linux…

En attendant, j'ai inséré l'image en CSS (background) ; dans cette configuration, l'arrondi fonctionne ! C'est assez logique dans la mesure où la propriété est BORDER-radius — ça concerne les bordure… Mais dans ce cas-là, pourquoi Safari l'interprète différemment ?

— Flavien.
  • Partager sur Facebook
  • Partager sur Twitter
1 juillet 2010 à 22:37:52

boh sous linux moi j'utilise
chromium ffx et po de pb css3 ...
  • Partager sur Facebook
  • Partager sur Twitter
2 juillet 2010 à 15:33:37

Flavien je crois que Webkit l'interprète bien, c'est gecko(firefox) qui n'a peut être pas implémenté cette fonctionnalité pour la balise image.
Ou peut être c'est du au fait que Gecko zap cette propriété car tu as du mettre un truc genre img{border:0 ou none}
Bref c'est intéressant de savoir que de la mettre en background corrige le problème. Merci :)
  • Partager sur Facebook
  • Partager sur Twitter
2 juillet 2010 à 16:00:07

Si normalement sous ffx enfin sous ffx 3.6 tous passe bien pour lea border-image tu as quelle version?
  • Partager sur Facebook
  • Partager sur Twitter
2 juillet 2010 à 16:48:22

Citation : demenvil

Si normalement sous ffx enfin sous ffx 3.6 tous passe bien pour lea border-image tu as quelle version?


C'est pas de border-image qu'il est question là. :)

Sinon, une autre solution aurait été d'encadrer ton image par un span et d'appliquer le border-radius sur le span. Mais c'est pas propre (bien qu'utiliser le background ne le soit pas plus).
  • Partager sur Facebook
  • Partager sur Twitter
3 juillet 2010 à 0:06:12

a voui dsl mais plutôt border-radius ^^
me suis trompé donc oui chez moi border-radius fonctionne parfaitement avec les images..

As tu essayé de vider le cache?
  • Partager sur Facebook
  • Partager sur Twitter
9 août 2010 à 18:37:42

J'ai eu le même problème, et mettre l'image dans un <span> ne change rien. Par contre je n'ai pas vraiment compris comment insérer une image dans un background, quelqu'un pourrait m'éclairer ?
  • Partager sur Facebook
  • Partager sur Twitter
Anonyme
9 août 2010 à 19:29:08

Il me semble qu'il faut appliquer une bordure à l'image :

img
{
    border: 1px #couleurDeTonFond; /*Couleur du fond pour qu'on ne la voie pas*/
    -moz-border-radius: ***px;
    /*etc...*/
}


Essaie toujours ça ^^
  • Partager sur Facebook
  • Partager sur Twitter
10 novembre 2010 à 2:22:28

J'ai le même problème : Firefox et Opera n'arrondissent pas les images malgré ce pavé :

img {
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	-o-border-radius: 15px;
	-khtml-border-radius: 15px;
	border-radius: 15px;
}

Donc Safari et Chrome / Chromium seraient les seuls à implémenter border-radius pour les images ?
J'ai remarqué que Chrome n'a même pas besoin de préfixe, la dernière ligne lui suffit !

@Alienware >

Tu ne connais pas cette propriété ? :

background-image:url('chemin/fichier.ext');


Elle est très simple d'utilisation.
  • Partager sur Facebook
  • Partager sur Twitter
10 novembre 2010 à 21:34:57

Salut
Oui depuis peu chrome et chromium plus obligé de mettre le préfixe, mais pour les autres webkit et autres il vaut mieux le laisser.
As tu essayés de passer par une class ou un id pour arrondir ton (tes) image(s) ?
  • Partager sur Facebook
  • Partager sur Twitter