Ressources pour développeur web

Théme de la semaine : Démo CSS

Arrondir une image en CSS : Guide complet de border-radius

Temps de lecture estimé : 7 minutes
Accueil → CSS3 → Arrondir une image en CSS : Guide complet de border-radius

Vous souhaitez arrondir une image en CSS pour moderniser votre site web ? Grâce à la propriété CSS border-radius, vous pouvez créer facilement des coins arrondis ou une image ronde. Découvrez les méthodes simples, les bons réglages et les exemples pratiques pour réussir votre design rapidement.

  • Donner immédiatement un rendu plus moderne et professionnel à vos images grâce aux bons réglages CSS.
  • Créer aussi bien des coins arrondis qu’une image ronde propre, adaptée aux profils, galeries et cartes visuelles.
  • Éviter les erreurs fréquentes de mise en forme pour obtenir un résultat harmonieux sur ordinateur comme sur mobile.

Une image carrée ou rectangulaire fonctionne très bien sur un site web. Pourtant, dans de nombreux cas, une image arrondie apporte tout de suite un rendu plus moderne, plus doux et plus professionnel. Photo de profil, avatar, témoignage client, galerie, équipe d’entreprise… l’effet visuel change immédiatement.

Pour arrondir une image en CSS, il n’y a rien de compliqué. Même si vous débutez, vous allez comprendre rapidement comment cela fonctionne. Dans ce tutoriel complet, vous allez découvrir les bases, les erreurs à éviter, les variantes utiles et plusieurs exemples concrets prêts à utiliser sur votre site.

Pourquoi arrondir une image en CSS ?

Avant de passer au code, prenons quelques secondes pour comprendre l’intérêt.

Quand vous utilisez des coins arrondis sur une image, vous améliorez souvent :

  • l’esthétique générale du site
  • la modernité du design
  • la cohérence avec les boutons et cartes modernes
  • la mise en valeur d’un portrait
  • l’expérience utilisateur
Arrondir une image en CSS avec border-radius

Aujourd’hui, les interfaces trop rigides avec des blocs parfaitement carrés paraissent parfois datées. Un léger arrondi rend souvent l’ensemble plus agréable. Une photo de profil carrée donne parfois l’impression d’être coincée dans une boîte…

Comprendre la propriété CSS border-radius

La propriété principale pour arrondir image CSS est :

border-radius

Elle permet de créer des coins arrondis sur un élément HTML, y compris une image.

Voici un exemple simple :

<img src="photo.jpg" alt="Portrait">
img {
    border-radius: 15px;
}

Résultat : les quatre coins de l’image deviennent arrondis.

arrondir une image

Que signifie 15px ?

Le nombre représente l’intensité de l’arrondi.

  • 5px = léger arrondi
  • 15px = arrondi visible
  • 30px = arrondi marqué
  • 50% = cercle ou ovale selon la forme de l’image

Plus la valeur augmente, plus l’effet est prononcé.

Premier exemple complet

Voici une structure simple que vous pouvez tester immédiatement.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Image arrondie</title>

<style>
img {
    width: 300px;
    border-radius: 20px;
}
</style>

</head>
<body>

<img src="chat.jpg" alt="Un chat">

</body>
</html>

Explication ligne par ligne :

  • width: 300px; On fixe la largeur de l’image.
  • border-radius: 20px; On arrondit les coins.

Très simple, mais déjà très efficace.

Comment créer une image ronde en CSS

C’est souvent ce que recherchent les débutants : transformer une photo en cercle.

Pour cela, utilisez :

border-radius: 50%;

Exemple :

<img src="profil.jpg" alt="Photo de profil" class="avatar">
.avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
}
arrondir une image

👉 Pour aller plus loin : Découvrez les unités relatives en CSS.

Pourquoi largeur et hauteur identiques ?

Pour obtenir un vrai cercle, l’image doit être carrée :

  • 200 x 200
  • 300 x 300
  • 150 x 150

Si largeur et hauteur sont différentes, vous obtiendrez un ovale.

Ajouter une bordure

.avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 5px solid #ffea00;
}
arrondir une image

Image ronde parfaite avec object-fit

Parfois, une image se déforme. Le visage devient large, étrange, presque extraterrestre. Heureusement, il existe une solution.

.avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
}

À quoi sert object-fit: cover; ?

Cette propriété permet :

  • de remplir la zone ;
  • de conserver les proportions ;
  • d’éviter les déformations.

C’est indispensable pour les avatars modernes.

👉 Tout savoir sur : La propriété object-fit en CSS

Arrondir seulement certains coins

Vous n’êtes pas obligé d’arrondir toute l’image. Vous pouvez cibler un seul coin.

Coin supérieur gauche

img {
    border-top-left-radius: 20px;
}

Coin inférieur droit

img {
    border-bottom-right-radius: 30px;
}

Exemple créatif

img {
    border-top-left-radius: 40px;
    border-bottom-right-radius: 40px;
}

Cela crée un style original et dynamique.

Arrondir image CSS avec des valeurs différentes

Vous pouvez donner une valeur à chaque coin.

img {
    border-radius: 10px 20px 30px 40px;
}

Ordre :

  1. haut gauche
  2. haut droit
  3. bas droit
  4. bas gauche

C’est très pratique pour des designs personnalisés.

Exemple concret : photo de profil moderne

Voici un style utilisé partout sur le web.

<img src="membre.jpg" alt="Membre équipe" class="profil">
.profil {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #ffffff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}
arrondir une image

Ce que cela ajoute

  • image ronde ;
  • contour blanc ;
  • ombre élégante ;
  • effet premium.
  • Votre photo semble immédiatement plus pro !

Exemple concret : miniature avec coins arrondis

Parfait pour un blog ou une boutique.

.miniature {
    width: 300px;
    border-radius: 12px;
}

Utilisation :

<img src="article.jpg" alt="Article" class="miniature">

Simple, propre, efficace.

arrondir une miniature

Ajouter un effet au survol

Vous pouvez rendre l’image interactive.

Formation web et informatique - Alban Guillier - Formateur

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ? 
img {
    border-radius: 20px;
    transition: 0.3s;
}

img:hover {
    border-radius: 40px;
}

Quand l’utilisateur passe la souris dessus, l’arrondi change.

arrondir une miniature

Petit détail visuel, gros impact.

Faire une galerie harmonieuse

Si vous utilisez plusieurs images, gardez la même valeur.

.galerie img {
    width: 250px;
    border-radius: 15px;
    margin: 10px;
}

Ainsi, toute la galerie reste cohérente.

Un site beau, c’est souvent une suite de petits détails bien pensés.

Erreurs fréquentes à éviter

1. Oublier la taille de l’image ronde

border-radius: 50%;

Ne suffit pas toujours si l’image n’est pas carrée.

2. Image écrasée

Sans object-fit, certaines images deviennent déformées.

3. Valeur trop forte

border-radius: 200px;

Sur une petite image, cela peut produire un résultat étrange.

4. Tester uniquement sur ordinateur

Vérifiez toujours sur mobile.

Responsive design : arrondir image sur mobile

Pour que l’image s’adapte :

img {
    max-width: 100%;
    height: auto;
    border-radius: 20px;
}

Pourquoi ?

  • l’image ne dépasse pas l’écran ;
  • elle garde ses proportions ;
  • les coins restent arrondis.

Différence entre pixels et pourcentage

Avec pixels

border-radius: 20px;

Toujours la même valeur.

Avec pourcentage

border-radius: 50%;

La valeur dépend de la taille de l’élément.

En résumé :

  • pixels = précis ;
  • pourcentage = flexible.

Peut-on arrondir une image de fond (backbround) ?

Oui. Si vous utilisez un div avec une image en fond :

<div class="bloc"></div>
.bloc {
    width: 300px;
    height: 200px;
    background-image: url("photo.jpg");
    background-size: cover;
    background-position: center;
    border-radius: 20px;
}

Très utilisé pour les cartes modernes.

Créer une carte design complète

Voici un exemple concret.

<div class="carte">
    <img src="voyage.jpg" alt="Voyage">
    <h2>Escapade nature</h2>
</div>
.carte {
    width: 320px;
    padding: 15px;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.carte img {
    width: 100%;
    border-radius: 15px;
}
Voyage

Escapade nature

Résultat : propre, moderne, professionnel.

👉 Tutoriel complet : WebDesign d’une Card produit

Compatibilité navigateurs

Bonne nouvelle : border-radius fonctionne sur :

  • Chrome
  • Firefox
  • Safari
  • Edge
  • mobile Android
  • iPhone

Autrement dit : vous pouvez dormir tranquille.

Astuce design : arrondi doux ou marqué ?

Style sobre

border-radius: 8px;

Style moderne

border-radius: 16px;

Style très doux

border-radius: 30px;

Cercle

border-radius: 50%;

Choisissez selon votre univers graphique.

Comment bien choisir la valeur ?

Posez-vous trois questions :

  • L’image est-elle grande ? Grande image = arrondi plus visible.
  • Le site est-il professionnel ? Préférez un arrondi léger.
  • Le site est-il fun ou moderne ? Vous pouvez accentuer l’effet.

Résumé rapide à retenir

Pour arrondir image CSS, retenez ceci :

border-radius: 20px;

Pour une image ronde :

border-radius: 50%;

Pour éviter la déformation :

object-fit: cover;

Avec seulement trois lignes, vous pouvez déjà créer un rendu professionnel.

FAQ : Arrondir une image en CSS

Comment arrondir une image en CSS facilement ?

Pour arrondir une image en CSS, utilisez la propriété border-radius. Par exemple :

img { border-radius: 20px; }

Cette ligne permet de créer des coins arrondis simplement, même si vous débutez.

Comment rendre une image ronde avec CSS ?

Pour obtenir une image parfaitement ronde, appliquez border-radius: 50%; sur une image carrée :

img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

Ajoutez object-fit: cover; pour éviter toute déformation.

Pourquoi mon image ne devient pas ronde en CSS ?

Si votre image ne devient pas ronde, la cause principale est souvent une largeur et une hauteur différentes. Pour créer un cercle, l’image doit avoir les mêmes dimensions. Vérifiez aussi que la propriété CSS est bien appliquée à la bonne image.

Maîtriser ce détail change votre site

Beaucoup de débutants pensent qu’un beau site dépend uniquement des couleurs ou des animations. En réalité, ce sont souvent les petits réglages visuels qui font toute la différence. Une image bien cadrée, légèrement arrondie, harmonieusement intégrée… et votre page paraît immédiatement plus sérieuse.

Apprendre à arrondir une image en CSS, ce n’est donc pas juste apprendre une propriété. C’est commencer à développer votre œil de webdesigner. Et ça, croyez-moi, vaut bien plus que quelques pixels arrondis.

Articles relatifs

  1. Formulaire web : 8 Exemples de code HTML et CSS responsive
    Découvrez 8 exemples inspirants de formulaires web modernes et 100 % responsive. Apprenez à créer facilement des mises en page élégantes, accessibles et adaptées à tous les écrans, grâce à…
  2. Corner-shape CSS : créez des coins uniques facilement
    Maîtrisez corner-shape CSS pour créer des coins uniques, moderniser vos interfaces et améliorer votre design sans complexité. Une technique simple, efficace et accessible pour rendre vos composants visuellement plus impactants….
  3. Keyframes CSS : Guide complet des animations web
    Découvrez comment créer des animations CSS fluides et interactives avec les keyframes. Apprenez pas à pas à animer textes, boutons et images pour rendre votre site web dynamique et captivant….
  4. Design pagination : 4 exemples CSS modernes + Code complet
    Améliorez le design de vos pagination avec 4 exemples modernes en CSS. Apprenez à créer une navigation fluide, responsive et efficace pour booster l’expérience utilisateur et le référencement naturel de…