Border Radius

Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 40 sur 76.

En CSS, la propriété border-radius est utilisée pour créer des coins arrondis pour un élément. Cette propriété vous permet de spécifier le rayon de la courbure pour chaque coin, vous donnant ainsi le contrôle sur la forme de la bordure de l'élément. Voici la syntaxe de base pour utiliser la propriété border-radius :

selector {
    border-radius: value;
}

value : Le rayon souhaité pour les coins arrondis, qui peut être spécifié en pixels (px), en ems (em), en pourcentages (%) ou en d'autres unités CSS valides.

Vous pouvez spécifier une seule valeur pour appliquer le même rayon aux quatre coins. Dans l'exemple suivant, tous les éléments <div> auront des coins arrondis avec un rayon de 10px.

div {
    border-radius: 10px;
}

Vous pouvez définir les différentes valeurs pour chaque coin individuellement, en utilisant l'ordre suivant : en haut à gauche, en haut à droite, en bas à droite, en bas à gauche.

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

Vous pouvez également spécifier seulement deux valeurs, la première valeur s'appliquera aux coins supérieur gauche et inférieur droit, et la deuxième valeur s'appliquera aux coins supérieur droit et inférieur gauche.

img {
    border-radius: 20px 50px;
}

Défi

Facile

On vous donne un document HTML avec deux éléments <div>, chacun ayant les classes "one" et "two". Suivez les étapes ci-dessous :

Écrivez une règle CSS utilisant un sélecteur de classe pour cibler tous les éléments ayant la classe “one”. Définissez la bordure sur 3px solid #4287f5 et le border-radius sur 15px pour donner à tous les coins la même forme arrondie.
Écrivez une règle CSS utilisant un sélecteur de classe pour cibler tous les éléments ayant la classe “two”. Définissez la bordure sur n'importe quelle valeur et le border-radius sur n'importe quelle valeur de votre choix.

Aide-mémoire

La propriété border-radius crée des coins arrondis pour les éléments :

selector {
    border-radius: value;
}

Les valeurs peuvent être spécifiées en pixels (px), ems (em), pourcentages (%) ou d'autres unités CSS valides.

Valeur unique - applique le même rayon à tous les coins :

div {
    border-radius: 10px;
}

Quatre valeurs - coins individuels (haut-gauche, haut-droite, bas-droite, bas-gauche) :

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

Deux valeurs - la première s'applique au coin haut-gauche et bas-droite, la seconde au coin haut-droite et bas-gauche :

img {
    border-radius: 20px 50px;
}

Essayez vous-même

<html>
<head>
    <title>Border Radius</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="one">This is a division with rounded corners.</div>
    <div class="two">This is another division with rounded corners.</div>
</body>
</html>