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 permet de créer des coins arrondis pour un élément. Cette propriété vous permet de spécifier le rayon de courbure de chaque coin, ce qui vous donne 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 em (em), en pourcentage (%) ou dans 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;
}

Tu peux définir les différentes valeurs de chaque coin individuellement, en utilisant l’ordre suivant : supérieur gauche, supérieur droit, inférieur droit, inférieur gauche.

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

Tu peux aussi 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 contenant deux éléments <div>, chacun avec 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 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 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.

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>