Comment arrondir les angles d'une image HTML ?

Réponses rédigées par Antoine
Dernière mise à jour : 2021-06-05 12:40:33
Thèmes : html - image - angle - arrondir - css
Question

Bonjour j'ai une balise HTML image <img>, et je cherche le moyen d'arrondir les angles de l'image, merci.

Réponse

Pour arrondir les angles d'une image HTML, vous pouvez utiliser la propriété CSS border-radius. Sa valeur est généralement exprimée en pourcentage, mais elle peut l'être également en pixel, em, ou avec une valeur globale du type inherit, initial, revert ou unset.

Il est à noter que vous pouvez appliquer des angles différents aux quatre angles :

  • border-top-left-radius applique un angle en haut à gauche.
  • border-top-right-radius en haut à droite.
  • border-bottom-right-radius en bas à droite.
  • border-bottom-left-radius en bas à gauche.

Dans l'exemple ci-dessous on créé une règle CSS qui applique un angle de 10% aux quatre angles de toutes les balises <img> :

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment arrondir les angles d'une image HTML ?</title>
<style>
img {
  border-radius: 10%;
}
</style>
</head>
<body>
<img src="https://www.collaborativejob.com/images/pub/welcome-reset.jpg" alt="" style="width:100px">
</body>
</html>