border - Cours

Bordure

Tout élément html est à l'écran inscrit dans une boîte rectangulaire. On peut, en css, définir une bordure autour de cette boîte.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Bordure  </title>
        <style>
        /* bordure rouge d'épaisseur 2 pixels autour des paragraphes : */
        p{ 
            border-color: red; /*couleur de bordure : rouge */
            border-width: 2px; /* épaisseur de la bordure : 2 pixels */
            border-style: solid;  /* tracé en trait continu */
            margin: 1em; /*marge entre paragraphes*/
            padding: 0.8em; /* marge entre texte interne et bordure */
         }
         /* style ne concernant que le second paragraphe : */
         p:nth-of-type(2){
            width: 200px;
         }
         /* style ne concernant que le troisième paragraphe : */
         p:nth-of-type(3){
            width: 300px;
            border-width: 5px;
         }
        </style>
    </head>
    <body>
          <p> Un paragraphe. </p>
          
          <p> Un paragraphe avec largeur fixée. </p>
          
          <p> Le troisième paragraphe avec largeur de bordure redéfinie. </p>
    </body>
</html>

Pour tester

Vous pouvez ci-dessous sélectionner diverses valeurs dans le formulaire (zone jaune) et observer l'effet (zone sur fond blanc) ainsi que le code css correspondant (zone sur fond bleu).

Je suis une boîte.

Code css :

Bordures sur 4 côtés

La bordure peut être présente sur un seul côté ou sur 2, 3 ou 4 côtés (ou aucun).

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> 4 bords  </title>
        <style>
        /* bordure inférieure rouge d'épaisseur 2 pixels autour des paragraphes : */
        p{ 
            border-color: red; /*couleur de bordure : rouge */
            border-width: 2px; /* épaisseur de la bordure : 2 pixels */
            border-bottom-style: solid;  /* tracé en trait continu, bordure inférieure */
            margin: 3em; /*marge entre paragraphes*/
            padding: 0.8em; /* marge entre texte interne et bordure */
         }
         /* style ne concernant que le second paragraphe : */
         p:nth-of-type(2){
            width: 200px;
            border-top: 3px dotted green;/* ajout d'une bordure au dessus */
         }
         /* style ne concernant que le troisième paragraphe : */
         p:nth-of-type(3){
            width: 300px;
            border-width: 5px;
            border-left: 10px ridge yellow; /* ajout bordure gauche */
         }
        </style>
    </head>
    <body>
          <p> Un paragraphe avec bordure inférieure. </p>
          
          <p> Un paragraphe avec bordure inférieure et bordure supérieure. </p>
          
          <p> Le troisième paragraphe avec bordure inférieure et bordure gauche. </p>
    </body>
</html>

Arrondir les angles

La propriété border-radius permet de donner des arrondis aux angles des boîtes.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Arrondis  </title>
        <style>
        /* bordure inférieure rouge d'épaisseur 2 pixels autour des paragraphes : */
        p{ 
            border-color: red; /*couleur de bordure : rouge */
            border-width: 5px; /* épaisseur de la bordure : 2 pixels */
            border-style: solid;  /* tracé en trait continu, bordure inférieure */
            border-radius: 10px;
            margin: 3em; /*marge entre paragraphes*/
            padding: 0.8em; /* marge entre texte interne et bordure */
         }
         /* style ne concernant que le second paragraphe : */
         p:nth-of-type(2){
            width: 200px;
            border-top-left-radius: 50px;/* on redéfinit l'arrondi supérieur gauche */
         }
         /* style ne concernant que le troisième paragraphe : */
         p:nth-of-type(3){
            width: 300px;
            border-radius: 50%;
         }
        </style>
    </head>
    <body>
          <p> Un paragraphe avec tous les coins de même arrondi. </p>
          
          <p> Un paragraphe avec le coin supérieur gauche un peu plus arrondi. </p>
          
          <p> Un paragraphe avec du 50% pour arrondi. </p>
    </body>
</html>

Les bordures

Bordure

Pour tester

Choix de l'épaisseur.

Choix du style de trait.

Choix de la couleur.

Bordures sur 4 côtés

Arrondir les angles