Chaque élément HTML est contenu dans une boîte. Cette boîte possède des bordures modifiables grâce à trois propriétés :

• border-width pour l'épaisseur ;
• border-style pour la forme ;
• border-color pour la couleur.

On peut aussi utiliser la propriété raccourci border qui permet de préciser les trois propriétés précédentes en une seule déclaration. On trouvera les valeurs possibles pour ces propriétés sur cette page de MDN.

Bac à sable : Des bordures autour des boîtes

Dans ce bac à sable, les dimensions sont en pixels.

Ci-dessous, on peut choisir la bordure qui encadre le paragraphe, c'est-à-dire son épaisseur, sa couleur et son apparence.

Épaisseur :

10

Apparence : aucune masquée trait pointillée point par point double sous-épaisseur sur-épaisseur sous-élevée sur-elevée
Couleur :

Code CSS

p {                                 /* Mise en forme des paragraphes */
    border-width: 0px;
    border-style: none;
    border-color: #000000;
}

Raccourci possible en CSS

p {
    border: 0px none #000000;
}

Bac à sable : Identifier les bordures

Une bordure est en fait un rectangle constitué de quatre côtés, chacun est identifié par sa position.

Ci-dessous, on peut choisir l'apparence de chaque côté. Faites des tests avec des côtés épais visibles et d'autres masqués.

Bordure haute :
aucune masquée trait pointillée point par point double sous-épaisseur sur-épaisseur sous-élevée sur-elevée
Bordure droite :
aucune masquée trait pointillée point par point double sous-épaisseur sur-épaisseur sous-élevée sur-elevée
Bordure basse :
aucune masquée trait pointillée point par point double sous-épaisseur sur-épaisseur sous-élevée sur-elevée
Bordure gauche :
aucune masquée trait pointillée point par point double sous-épaisseur sur-épaisseur sous-élevée sur-elevée

Code CSS

p {                                     /* Mise en forme des paragraphes */
    border-top : 0px none #000000; 
    border-right : 0px none #000000; 
    border-bottom : 0px none #000000; 
    border-left : 0px none #000000; 
}

Bac à sable : Arrondir les angles

La propriété border-radius permet d'arrondir les coins des bordures. Dans ce bac à sable, les dimensions sont en pixels.

Ci-contre, on peut choisir l'épaisseur, l'apparence et la couleur de la bordure qui encadre le paragraphe, ainsi que l'arrondit des angles (des coins).

Style de la bordure :
aucune masquée trait pointillée point par point double sous-épaisseur sur-épaisseur sous-élevée sur-elevée
Angle haut-gauche :
Angle haut-droit :
Angle bas-droit :
Angle bas-gauche :

Code CSS

p {                                 /* Mise en forme des paragraphes */
    border: 0px none #000000;       /* Épaisseur - Apparence - Couleur */
    border-radius: 0px 0px 0px 0px; /* Haut-Gauche Haut-Droit Bas-Droit Bas-Gauche */
}

Pour obtenir le même arrondi à tous les angles, on ne donne qu'une seule valeur :

border-radius: 5px;

On trouvera le détail sur cette page de MDN.

Exercice n°1

Compléter le code Css ci-dessous pour que :

1. L'article soit encadré d'une bordure en pointillés noirs d'épaisseur 1 pixel.
2. Le titre h3 se présente sous la forme suivante :

<!-- Partie html à ne pas modifier -->
<article>
    <h3> Un titre </h3>
    <p>
        A méditer :
        <q>Une fois qu'on a donné son opinion, il serait logique
        qu'on ne l'ait plus.</q>
    </p>
    <p>
        L'élément en-ligne <code>&lt;q&gt; &lt;/q&gt;</code> sert
        à baliser une citation courte dans la ligne.
    </p>
</article>

/* Partie css modifiable */
article {

}

h3 {

}

Exercice n°2

Un bloc HTML n'a pas besoin de contenir de texte pour exister. En fixant ses dimensions (width et height) dans la feuille CSS et en lui attribuant des bordures, on le voit apparaître.

Modifier le CSS pour obtenir une bordure ressemblant à la bordure entourant le bloc dans l'image ci-contre.

<!-- Partie html à ne pas modifier -->
<p>
</p>

/* Partie css modifiable */
p{
    width : 200px;                    /* On fixe la largeur du bloc */
    height: 100px;                    /* On fixe la hauteur du bloc */
    border: 5px ridge grey;            /* On fixe l'aspect de la bordure */
}

Une piste ?

Les dimensions des arrondis ne sont pas obligatoirement en pixels. Une dimension donnée en pixels donnera un coin de bordure en forme de quart de cercle. Une dimension donnée en pourcentage donnera un quart d'ellipse de dimensions proportionnelles aux dimensions de la boîte à encadrer.

Travail originel CC-BY-NC-SA : Nicolas Buyle-Bodin, Jean-Manuel Meny et Mcikaël Bordonaro. Autres modifications par Cédric Frayssinet et Maxime Chourré