Bordures

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

En CSS, une bordure est une ligne qui entoure un élément, le séparant des autres éléments et définissant ses limites.

Voici la syntaxe de base pour utiliser la propriété border :

selector {
    border-width: value;
    border-style: value;
    border-color: value;
}

border-width : L'épaisseur de la bordure, qui peut être spécifiée en pixels (px), ems (em) ou d'autres unités CSS valides. Vous pouvez également utiliser des mots-clés comme thin, medium et thick.

border-style: Le style de la bordure, qui peut être l'un des suivants :
- dotted: Une série de points
- dashed: Une série de tirets
- solid: Une ligne continue
- double: Deux lignes continues

border-color : la couleur de la bordure, qui peut être spécifiée à l'aide de noms de couleurs, de valeurs hexadécimales, de valeurs RGB ou de valeurs HSL.

Vous pouvez également utiliser la notation abrégée pour définir les trois propriétés de bordure à la fois :

selector {
    border: width style color;
}

Par exemple :

p {
    border: 2px solid blue;
}

Dans cet exemple, tous les éléments <p> (paragraphe) ont une bordure bleue continue d'une largeur de 2px.

Défi

Facile

On vous donne un document HTML avec trois éléments <div>, chacun représentant un programme de cinéma pour Friday, Saturday, et Sunday. Votre tâche consiste à utiliser la propriété border pour les styliser.

Stylisez le programme de Friday avec une bordure 3px solid black.
Stylisez le programme de Saturday avec une bordure 4px dashed blue.
Stylisez le programme de Sunday avec une bordure 5px dotted green.

Aide-mémoire

Une bordure est une ligne qui entoure un élément, le séparant des autres éléments et définissant ses limites.

Propriétés de bordure :

border-width : Épaisseur (px, em, ou des mots-clés comme thin, medium, thick)
border-style : Style (dotted, dashed, solid, double)
border-color : Couleur (couleurs nommées, hex, RGB, HSL)

Propriétés individuelles :

selector {
    border-width: value;
    border-style: value;
    border-color: value;
}

Notation raccourcie :

selector {
    border: width style color;
}

Exemple :

p {
    border: 2px solid blue;
}

Essayez vous-même

<html>
<head>
    <title>Borders</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="friday">
        <h3>Friday</h3>
        <p>7:00 PM - The Inception</p>
    </div>
    <div class="saturday">
        <h3>Saturday</h3>
        <p>8:00 PM - The Matrix</p>
    </div>
    <div class="sunday">
        <h3>Sunday</h3>
        <p>9:00 PM - Interstellar</p>
    </div>
</body>
</html>