La bordure css est un élément incontournable dans un projet web. On peut lui appliquer énormément de propriétés, j’ai donc décidé de vous les présenter, et de les mettre en scène à travers une suite de cours css.

 

Lorsque vous modifiez une bordure css, il est possible de la transformer d’un tas de manière possibles

Sachez tout d’abord, que vous devrez ajouter la valeur « border: 1px solid; » dans toutes les situations, faute de quoi votre bordure restera invisible pour les navigateurs, même si, comme je l’expliquais dans mon article sur les marges en css, la bordure css est présente autour de chaque élément, il faudra la « matérialiser » dans votre feuille de style.

Vous pouvez modifier la couleur d’une bordure en css avec la propriété border-color :


/* Voici l’exemple de base avec le nom d'une couleurs css toujours en anglais... */

p {

border-color: black;
border: 1px solid;

}

/* Vous pouvez aussi utiliser un code rgb à la place du nom d'une couleur (ici le rgb(0,0,0) est le code Red, Green, Blue (rouge, vert, bleu en français) de la couleur noire*/

p {

border-color: rgb(0,0,0);
border: 1px solid;

}

/* Et enfin, la meilleure solution à mon sens, est d'utiliser un code hexadécimal comme ceci : */

p {

border-color: #000000;
border: 1px solid;

}

Ce sont des valeurs que vous pouvez trouver facilement sur internet,  mais je vous recommande d’utiliser un logiciel gratuit comme photofiltre ou gimp pour récupérer les codes en 3 secondes :

choix couleurs css

Si vous avez paint d’installé sur votre ordinateur, il permet aussi de récupérer le code rgb d’une couleur. Mais je préfère photofiltre pour ma part.

Bref au final, si je met du bleu, ça nous donne ça :

css bordure bleu

La bordure css est partout parce que dans la feuille de style, on à choisit d’appliquer ce style à la balise <p>,ce qui veut dire à tous les paraphes de la page. Mais on pourrait choisir d’appliquer cette bordure qu’a certains éléments, ou à un seul des paragraphes.

Dans notre page html, on utiliserait alors une classe css comme ceci :


<p> Voici le paragraphe 1 </p>
<p class="bordure"> Voici le paragraphe 2 </p>;

Vous pouvez choisir n’importe quel nom pour votre classe css, ici pour l’exemple, j’ai choisis « bordure »…

Du coup,  dans notre feuille de style, on écrirais ceci :


p.bordure {
border: 1px solid;
border-color:blue;

Ce qui donne l’ordre à la feuille de style : d’appliquer ce style pour les paragraphes qui ont la classe qui s’appelle « bordure ».

Ce qui va nous donner ça, et ça permettra de ne pas styliser les paragraphes qui ne possèdent pas la classe « bordure » :

bordure css exemple

Vous pouvez aussi choisir d’appliquer votre bordure css à plusieurs éléments en même temps, auquel cas vous pourriez par exemple mettre des virgules, et ajouter d’autres types de balises html :


p, h2, footer, body {
border: 1px solid;
border-color:blue;
}

Ce qui nous donnerait ceci :

bordures css

Génial non? :p Avec une simple virgule, vous écrivez sur un seul petit passage css et vous attribuez une bordure css à toutes vos balises html…

 

Maintenant comment faire pour changer le style d’une bordure en css?

Il existe différents styles de bordures en css, qui vous permettent de modifier la forme et l’apparence d’une bordure, voici une liste des plus connus :

  • border-style : solid
  • border-style: dashed
  • border-style: dotted
  • border-style: double
  • borderstyle: none
  • border-style: groove
  • border-style: ridge
  • border-style: inset
  • border-style: outset

Il vous suffit alors d’ajouter une de ces propriétés (ici border-style:dotted;) à votre bout de code, pour changer son apparence, voici un exemple :


p, h2, footer, body {
border: 1px solid;
border-color:black;
border-style: dotted;
}

Ce qui va nous donner ça :

bordure dotted

Et ce n’est pas tout… Une bordure css possède 4 parties (le haut, la gauche, la droite, et le bas), il est donc possible de les modifier de manière individuelle comme ceci :


p {
border: 1px solid;
border-color:black;
border-left-style: dotted;
border-right-style: groove;
border-top-style: none;
border-bottom-style: dashed;
}

Ce qui donne ceci :

bordures css modifiés

Ce n’est pas forcement clair à l’image, mais chaque les 4 face possèdent leurs propres bordures… border-left-style: dotted; correspond à la partie gauche, border-right-style: groove; à la partie droite, border-top-style: none; à la partie haute.

Si vous le désirez, vous pouvez aussi simplifier leur écriture en css en les combinant comme ceci :


p {
border: 4px solid;
border-color:black;
border-style: none groove dashed dotted;
}
/* Bordure haute, droite, basse, gauche (sens des aiguilles d'une montre) */

J’ai utilisé la propriété none, pour masquer la bordure css du haut.

Si vous êtes perdu, pensez au sens des aiguille d’une montre, les contours s’affichent de gauche à droite… Un autre petit truc bon à savoir aussi, c’est que vous pouvez n’afficher que 2 valeurs, et les autres vont se compléter automatiquement, par exemple :


p {
border: 2px solid;
border-color:black;
border-style: solid dotted;
}

Ici comme on ne renseigne que la partie haute, et droite… Le langage css en déduit que la partie basse est comme la partie partie haute (solid), et comme on a renseigné la partie droite, il en déduit que la partie gauche est comme la partie gauche (dooted).

Ce qui nous donne ceci :

combinaison bordure css

C’est une habitude à prendre…. vous la prendrez très vite…

 

Donner une taille différente à vos bordures css :

Il peut arriver, que l’on veuille des bordures de taille différentes, pour cela, on peut les styliser de manière individuelle comme ceci avec la propriété border-width :


p {
border-color:black;
border-style: solid dashed none solid;
border-width: 1px 2px 3px 4px;
}

Ou comme ça, en leur associant une couleur hexadécimale :


p {
border-color:black;
border-style: solid dashed none solid;
border-top: 1px solid #ff0;
border-right: 2px dashed #f0F;
border-bottom: 3px dotted #f00;
border-left: 5px solid #09f;
}

Mais il n’est pas possible de combiner couleur, taille et position sur la même ligne css…

 

Vous pouvez aussi associer une taille standard aux bordures css :

En langage css, vous avez aussi la possibilité de styliser vos bordures avec ces propriétés :

  • thin
  • medium
  • thick

C’est à dire que vous pouvez mettre ça dans votre feuille de style :


p{

border-style:solid;
border-width:thin;

}

Ou encore :


p {
border-style:solid;
border-width:medium;
}

Ou encore :


p{
border-style:solid;
border-width:thick;
}

Et vous pouvez même combiner tout ce qu »on à vu jusqu’à maintenant comme ceci :


p {
border-style: solid dashed dotted solid;
border-color : #FF0000 #993366 #3366FF #666699;
border-width: 3px 5px 7px 4px; /* Ici vous pouvez mettre thin, medium, thick à la place des pixels par exemple : border-width: thick thin thin medium;*/
}

Arrondir une bordure css

Maintenant que vous maîtrisez la pluaprt des subtilité de la création de bordure en css, vous pourriez avoir envie de les arrondir, pour ça, il faut utiliser la propriété border-radius ;


p {
border-style: solid dashed dotted solid;
border-color : #FF0000 #993366 #3366FF #666699;
border-width: 3px 5px 7px 4px;
border-radius: 50px;
}

Avec un border-radius simple, cela donne ceci :

css coins arrondis

Avec une valeur en pixel unique, cela arrondi les 4 coins, mais vous pouvez aussi décider d’avoir un arrondi différent pour les différents coins, alors, vous pouvez faire suivre 3 autres valeurs en pixel à côté de la premirèe valeur du radius :


p {
border-style: solid dashed dotted solid;
border-color : #FF0000 #993366 #3366FF #666699;
border-width: 3px 5px 7px 4px;
border-radius: 50px 20px 10px 5px;
}

Ce qui va vous donner ça :

css bordures arrondies

Evidemment si vous voulez des bordures arrondis et propres, ne gardez qu’un seule valeur (solid par exemple) et un seul radius.  La j’exagère volontairement les valeurs pour vous montrer les différences existantes.

Bref c’est de la vraie magie, et je crois qu’on à fait le tour de l’art de la bordure css, et que vous êtes maintenant prêt à  dompter les bordures css…  Pour ma part, je vous donne rendez-vous dans un prochain cours de css, ou l’on va s’intéresser à la gestion des polices d’écritures en css.

Faites connaître ce cours sur vos réseaux sociaux favoris :