Rayon de bordure

Fait partie de la section Style avec 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 courbure de 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

Un document HTML vous est fourni avec deux éléments <div>, chacun doté des 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 dotés de la classe “one”. Définissez la bordure sur 3px solid #4287f5 et le rayon de bordure sur 15px afin de 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 dotés de la classe “two”. Définissez la bordure sur n’importe quelle valeur et le rayon de bordure sur n’importe quelle valeur de votre choix.

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>