Chapitre 155 | Les Borders

Les Borders

Les border en CSS permettent de créer des contours autour d’un élément HTML. Ces contours peuvent être placés sur les 4 côtés (haut, bas, gauche, droite) et être personnalisés avec des épaisseurs, des couleurs, et des styles (solide, pointillé, etc.).

Veuillez utiliser CodePen pour vos essais.

HTML

<div class="box">
    <p>Exemple</p>
</div>

Étape 1 : Une bordure simple autour de l’élément

Pour ajouter une bordure tout autour de l’élément .box, on utilise la propriété border. Ajoutons une bordure noire de 2 pixels d’épaisseur et de style solide.

CSS

.box {
    border: 2px solid black;
}

Étape 2 : Ajouter une bordure uniquement en haut

Pour afficher une bordure seulement sur un côté, par exemple en haut, on utilise border-top :

CSS

.box {
    border-top: 3px solid red;
}

On peut faire de même pour les autres côtés :

• border-left : bordure à gauche.
• border-right : bordure à droite.
• border-bottom : bordure en bas.

Étape 3 : Personnaliser chaque côté

Chaque côté peut avoir une épaisseur, une couleur, ou un style différent. Par exemple :

CSS

.box {
    border-top: 4px solid blue;
    border-right: 2px dashed green;
    border-bottom: 3px dotted orange;
    border-left: 5px double purple;
}

Étape 4 : Ajouter de l’espace entre la bordure et le texte avec padding

Le padding est l’espace entre le texte et la bordure. Ajoutons 10 pixels d’espace tout autour.

CSS

.box {
    border: 3px solid black;
    padding: 10px;
}

Étape 5 : Exemple final avec bordures stylisées

Ajoutons une bordure uniquement en haut et en bas, avec un padding horizontal plus large pour que les bordures soient légèrement plus larges que le texte.

CSS

.box {
    border-top: 3px solid #ff0062;
    border-bottom: 3px solid #ff0062;
    padding: 10px 20px;
    text-align: center; /* Centrer le texte */
    font-family: Arial, sans-serif; /* Utiliser une police lisible */
}

Résumé des propriétés importantes

1. border : ajoute une bordure tout autour.
2. border-top, border-right, border-bottom, border-left : bordures pour chaque côté.
3. padding : espace entre le texte et la bordure.

Couleur et style : jouez avec les couleurs et styles (solid, dashed, dotted, etc.) en utilisant ce CodePen et ajouter des borders au bloc « je-teste »

Exemple d’utilisation

Veuillez analyser et jouer avec l’exemple suivant en cliquant sur EDIT ON CODEPEN.