Il est possible d'ajouter une bordure à nos balises. Nous allons voir comment les paramétrer et les styliser.
La bordure s'insère entre la marge interne (padding) et la marge externe (margin).
Il faudra donc appliquer un padding si vous voulez avoir un blanc tournant uniforme dans votre bloc :
<div class="div_avec_bordure">
Un super test de texte un peu long mais pas trop, mais un peu quand même pour avoir une bonne idée du résultat escompté.
</div><!-- .div_avec_bordure -->
<div class="div_avec_bordure_et_padding">
Un super test de texte un peu long mais pas trop, mais un peu quand même pour avoir une bonne idée du résultat escompté.
</div><!-- .div_avec_bordure_et_padding -->
.div_avec_bordure{
border: 1px solid red;
}
.div_avec_bordure_et_padding{
border: 1px solid red;
padding: 20px;
}
Résultat :
Un super test de texte un peu long mais pas trop, mais un peu quand même pour avoir une bonne idée du résultat escompté.
bordure sans padding
Un super test de texte un peu long mais pas trop, mais un peu quand même pour avoir une bonne idée du résultat escompté.
bordure avec padding
Définir la taille d'une bordure avec border-width
La propriété border-width permet de définir la taille de notre bordure.
Comme pour la propriété margin ou padding, il est possible de spécifier une taille différente pour :
- la bordure du haut,
- la bordure du bas,
- la bordure de la droite,
- la bordure de la gauche,
Voilà la syntaxe en CSS :
div{
border-top-width : 4px;
border-bottom-width : 4px;
border-right-width : 4px;
border-left-width : 4px;
}
Voilà quelques exemples :
div{
border-top-width : 4px;
border-bottom-width : 4px;
border-right-width : 4px;
border-left-width : 4px;
}
div{
border-top-width : 20px;
border-bottom-width : 10px;
border-right-width : 10px;
border-left-width : 10px;
}
div{
border-top-width : 4px;
border-bottom-width : 20px;
border-right-width : 0px;
border-left-width : 2px;
}
Résultat :
Un court texte de démonstration.
Un border de 4px uniforme
Un court texte de démonstration.
Un border de 20px en haut et 10px sur les autres cotés
Un court texte de démonstration.
Un border anarchique
Unités
Il est possible d'utiliser plusieurs unités :
- Les pixels : ils permettent de définir une valeur fixe, absolue et identique sur tous les navigateurs.
- Les ems : ils permettent de définir une valeur proportionnelle à la taille des caractères utilisés dans la page.
- Les pourcentages : ils permettent de définir une valeur dynamique basée sur la taille de l'élément parent.
- Les vw : ils permettent de définir un pourcentage de la largeur du navigateur. Par exemple, 10vw = 10% de la largeur du navigateur, alors que 50vw n'en fait que 50%.
- Les vh : ils permettent de définir un pourcentage de la hauteur du navigateur. Par exemple, 10vw = 10% de la hauteur du navigateur, alors que 20vw n'en fait que 20%.
Regrouppement des valeurs
Enfin, comme pour la propriété margin ou padding, il est possible de regroupper les quatres valeurs en une seule propriété : border-width.
/* La propriété s'applique aux quatre côtés */
border-width: 4px;
/* vertical | horizontal */
border-width: 4px 20px;
/* haut | horizontal | bas */
border-width: 50px 2px 10px;
/* haut | droit | bas | gauche */
border-width: 25px 30px 50px 0;
Définir la couleur d'une bordure avec border-color
La couleur de base d'une bordure est un noir #000000. Il est néanmoins possible de modifier cette couleur avec la propriété border-color.
Ici aussi, il est possible de spécifier une taille différente pour :
- la bordure du haut,
- la bordure du bas,
- la bordure de la droite,
- la bordure de la gauche,
Voilà la syntaxe en CSS :
div{
border-top-color : red;
border-bottom-color : #512348;
border-right-color : rgba(157, 52, 78, 0.8);
border-left-color : transparent;
}
Résultat :
Un super test de texte un peu long mais pas trop, mais un peu quand même pour avoir une bonne idée du résultat escompté.
Notez qu'en plus des couleurs, nous avons à disposition la valeur transparent pour définir une valeur non nulle, mais sans couleur.
Pour en savoir plus sur la syntaxe des couleurs, vous pouvez vous référer à ce chapitre.
Regrouppement des valeurs
Enfin, comme pour la propriété border-width, il est possible de regroupper les quatres valeurs en une seule propriété : border-color.
/* La propriété s'applique aux quatre côtés */
border-color: red;
/* vertical | horizontal */
border-color: red #512348;
/* haut | horizontal | bas */
border-color: red #512348 rgba(157, 52, 78, 0.8);
/* haut | droit | bas | gauche */
border-color: red #512348 rgba(157, 52, 78, 0.8) transparent;
Définir le radius de nos bordures
Il est possible de définir un angle arrondi ou radius à nos bordures. Pour cela, nous allons utiliser la propriété border-radius.
border-radius: 20px;
Résultat :
Un super test de texte un peu long mais pas trop, mais un peu quand même pour avoir une bonne idée du résultat escompté.
Ici aussi, il est possible de définir une valeur différente pour chaque coté :
-
border-top-left-radius: définit une valeur pour l'angle en haut à gauche, -
border-top-right-radius: définit une valeur pour l'angle en haut à droite, -
border-bottom-right-radius: définit une valeur pour l'angle en bas à droite, -
border-bottom-left-radius: définit une valeur pour l'angle en bas à gauche,
Il est aussi possible de regroupper les valeurs en une seule propriété border-radius :
/* La propriété s'applique aux quatre côtés */
border-radius: 20px;
/* Une valeur différente pour chaque coté */
border-radius: 20px 20px 0 0;
Exemple :
Un super test de texte un peu long mais pas trop, mais un peu quand même pour avoir une bonne idée du résultat escompté.
border-radius: 20px 20px 0 0;
Définir la design d'une bordure avec border-style
Maintenant qu'on a vu comment modifier la taille et la couleur des bordure, nous allons voir comment en modifier le design.
Il existe pluieurs styles de base en css :
-
solid: la bordure de base, qui est un trait plein. -
dotted: style en pointillé rond. -
dashed: style en pointillé rectangulaire. -
double: double ligne. -
groove: style en cadre double, avec la lumière venant d'en bas. -
ridge: style en cadre double, avec la lumière venant d'en haut. -
inset: style en cadre simple, avec la lumière venant d'en bas. -
outset: style en cadre simple, avec la lumière venant d'en haut.
Voilà ce que ça donne :
solid
dotted
dashed
double
groove
ridge
inset
outset
Ici aussi, il possible de donner une valeur différente aux 4 borures. Par exemple :
div{
border-style: dashed solid;
}
Résultat :
Un super test de texte un peu long mais pas trop, mais un peu quand même pour avoir une bonne idée du résultat escompté.
Bordure personalisée avec des images
Nous allons maintenant aborder l'aspect le plus techique des bordures : les bordures personalisées.
En plus des styles basiques offerts par le CSS, il est possible de rempacer une bordure par une image.
Cette technique est complexe, je vais donc la détailler pas à pas.
Voilà le résultat final que nous cherchons à avoir :
Un super test de texte un peu long mais pas trop, mais un peu quand même pour avoir une bonne idée du résultat escompté.
Exemple de balise avec une bordure image.
Préparation du fichier image
Comme vous pouvez le voir, la bordure de cette balise n'a rien à voir avec ce que l'on a déjà vu. C'est parce que nous avons utilisé ici cette image :
Le fichier .png utilisé pour la border image
Découpage du fichier image
Mon image est découpé en 8 zones :
- les zones 1, 2, 3 et 4 qui correspondent aux 4 angles,
- les zones 5, 6, 7 et 8 qui correspondent aux 4 bordures.
Ce découpage est important car il sera utilisé dans notre code CSS.
La propriété border-image
La première étape consiste à définir un border-style. Techniquement, sa valeur n'aura pas d'incidence sur notre bordure, mais certains navigateurs n'afficheront pas notre image s'il n'est pas définit.
On va donc lui donner la valeur solid :
div.ma-bordure-image{
border-style: solid;
}
On va ensuite définir la taille de la bordure avec la propriété border-width :
div.ma-bordure-image{
border-style: solid;
border-width: 50px;
}
Il faut maintenant remplacer cette bordure noire de 50px par notre image.
Pour cela, nous allons utiliser la propriété border-image-source qui va spécifier le chemin vers notre image. Il peut être relatif ou absolu :
div.ma-bordure-image{
border-style: solid;
border-width: 50px;
border-image-source: url(images/border.png);
}
Notez que mon .png se trouve dans le dossier image.
Maintenant, mon image apparaît bien, mais elle s'affiche très mal (je vous invite à tester de votre coté pour voir le résultat). C'est là que notre découpage intervient.
Avec la propriété border-image-slice je vais définir les zones de mon image qui sont des angles, et des bordures.
div.ma-bordure-image{
border-style: solid;
border-width: 50px;
border-image-source: url(images/border.png);
border-image-slice: 142 142 142 142; /* haut | droit | bas | gauche */
}
Il ne me reste plus qu'à donner la taille de ma bordure image pour finir :
div.ma-bordure-image{
border-style: solid;
border-width: 50px;
border-image-source: url(images/border.png);
border-image-slice: 142 142 142 142; /* haut | droit | bas | gauche */
border-image-width: 50px;
}
Voilà le résultat :
Un super test de texte un peu long mais pas trop, mais un peu quand même pour avoir une bonne idée du résultat escompté.