Résolu Comment faire pour qu'une image est des bords arrondis ?

Bonjour,

J'aimerais savoir comment faire pour qu'une image est des coins arrondis ? J'aimerais bien savoir et merci à vous.

Cordialement,

Jolie Flamm

Bonjour,

Faire comme je l'ai proposé dans ce sujet➚
mais en remplaçant:  box-shadow: 0px 0px 15px #333;
par  border-radius : 20px;          si les arrondis doivent avoir 20px de rayon.

Il est possible de cumuler ombres et arrondis, en ajoutant au lieu de remplacer


◈ Pour adapter les valeurs et comprendre, voir :
https://developer.mozilla.org/fr/docs/Web/CSS/border-radius➚   (il y a des exemples interactifs, dont on peut modifier les valeurs)

Bon usage.

Bonsoir,

Le code que vous m'avez donné, je dois le mettre dans la partie CSS ou HTLM ? 

Merci à vous,

. Rosé .

Bonsoir,

C'est comme indiqué dans le sujet que j'ai mis en lien dans ma réponse précédente.  Ça fonctionne dans les deux situation CSS ou HTML.

En principe il faut privilégier la partie CSS, mais une partie CSS peut se trouver dans le HTML ( balise <style>)  ou dans un fichier externe (le thème css par exemple). Sinon il peut se placer dans l'élément HTML lui-même (attribut style="....").

Je constate que dans ton blog jolie-flamm.id.st il y a déjà un code qui correspond à ta  demande, il est dans le thème-css et c'est celui-ci

.module_contenu img { border-radius:30px 30px 30px 30px;}

Ce code met des coins arrondis à toutes les images du blog, sauf celles qui sont dans les modules de menu

Alors que veux tu faire de différent ?

Bonjour,

Pour mon blog jolie-flamm.id.st, ce n'est pas moi qui ai fait le thème car je ne suis pas très bonne en codage mais ce que je voulais, justement c'était mettre des image arrondies dans les images du blog en comptant les modules. Je dois donc mettre ce code dans toutes les parties (HTLM pour les modules et CSS pour le blog ?)

 . Rosé .

Ah voila la précision minimale qui manquait.

Alors :

- si toutes les images du blog sont concernées, avec les mêmes valeurs, y compris la barre-menu, il suffit de supprimer de ton code actuel le sélecteur .module_contenu , Il restera :  img { border-radius: 30px 30px 30px 30px ;}

- si toutes les images sont concernées, mais avec des valeurs différentes, il faut ajouter dans le thème-css, au même endroit, ce code:
.module_menu_contenu img { border-radius:15px 15px 15px 15px ;}

- si toutes les images du blog sont concernées, sauf la barre-menu, mais avec différences entre contenu et modules de menu il faut ces deux lignes dans le thème css :

.module_contenu img { border-radius: 30px 30px 30px 30px;}

0px ;}
.module_menu_contenu img { border-radius:15px 15px 15px 15px ;}

Dans chaque cas les valeurs en rouge sont à adapter selon tes préférences.

Direction css, modifier le thème . . .

 Edit : Si les 4 coins ont le même rayon il est inutile de répéter quatre fois 30px ou 15px (une seule fois suffit)