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 css précédentes en une seule déclaration. On trouvera les valeurs possibles pour ces propriétés sur cette page de w3schools.

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

Code Css :

p {                                 /* Mise en forme des paragraphes */
	border-width : 0px;             /* Epaisseur de la bordure en pixels */
	border-style : none;            /* Apparence de la bordure */
	border-color : #000000;         /* Couleur de la bordure - Noir */
	}		

Raccourci possible en Css :

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

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

Code Css :

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

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

Code Css :

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

Raccourci possible en Css :

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

On trouvera le détail sur la page de w3schools.

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

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

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.