Le frontière est une propriété abrégée en CSS, utilisée pour ajouter une bordure sur un élément. Cela nous permet de préciser la bordure de la boîte. Il définit la largeur, le style et la couleur de la bordure. Cette propriété CSS inclut les propriétés de bordure suivantes :

largeur de la bordure:La propriété border-width est utilisée pour définir la largeur de la bordure. Nous pouvons également utiliser les valeurs prédéfinies qui sont fin, moyen, et épais pour définir la largeur de la bordure. Il définit l'épaisseur de la bordure. Sa valeur par défaut est moyen .
Cette propriété ne peut pas être utilisée seule. Il est toujours utilisé avec d'autres propriétés de bordure, comme la propriété « border-style » pour définir la bordure en premier ; sinon, ça ne marchera pas.
La largeur de la bordure peut être différente pour chaque côté. Cela peut être fait en utilisant la bordure inférieure-largeur, bordure-largeur-haut, bordure-largeur-droite , et bordure-gauche-largeur .style de bordure:Cette propriété spécifie le style de la bordure. Il définit si la bordure est pleine, en pointillés, en pointillés, double, rainurée et l'une des autres valeurs possibles. Sans définir cette propriété, c'est-à-dire sans définir le style de bordure, aucune des autres propriétés de bordure ne fonctionnera. La bordure sera invisible sans préciser le style de bordure . En effet, la valeur par défaut de cette propriété CSS est aucun .
Semblable à largeur de la bordure , le style de la bordure peut être différent pour chaque côté. Cela peut être fait en utilisant les propriétés style bordure inférieure, style bordure supérieure, style bordure droite , et style bordure gauche .couleur de la bordure:Cela nous permet de changer la couleur de la bordure. Nous pouvons définir la couleur en utilisant le nom de la couleur, la valeur RVB ou la valeur hexadécimale. Semblable à la largeur de la bordure et style de bordure , nous pouvons changer la couleur de la bordure individuellement, c'est-à-dire que nous pouvons changer la couleur du côté inférieur, supérieur, gauche et droit de la bordure d'un élément. Cela peut être fait en utilisant les propriétés couleur de la bordure inférieure, couleur de la bordure supérieure, couleur de la bordure droite , et couleur de la bordure gauche .
Le couleur de la bordure la propriété ne peut pas être utilisée seule. Il doit être utilisé avec d'autres propriétés de bordure comme la propriété 'border-style' pour définir la bordure ; sinon, ça ne marchera pas.

bordure vs contour

Bien que les bordures et les contours soient très similaires, il existe certaines différences entre les contours et les bordures :

• En utilisant un contour, nous ne pouvons pas appliquer une largeur, un style et une couleur de contour différents pour les quatre côtés d'un élément, alors que, dans une bordure, nous pouvons appliquer la valeur fournie pour les quatre côtés d'un élément.
• La bordure fait partie de la dimension de l'élément, alors que le contour ne fait pas partie de la dimension de l'élément. Cela signifie que peu importe l'épaisseur du contour que nous appliquons à l'élément, ses dimensions ne changeront pas.

Voyons un exemple pour comprendre la propriété border.

Exemple

 p{ border: 4px blue; font-size: 20px; color: red; text-align: center; } p.none {border-style: none;} p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.hidden {border-style: hidden;} <p>No border.</p> <p>A dotted border.</p> <p>A dashed border.</p> <p>A solid border.</p> <p>A double border.</p> <p>A groove border.</p> <p>A ridge border.</p> <p>An inset border.</p> <p>An outset border.</p> <p>A hidden border.</p> 

Sortir

Maintenant, il y a un autre exemple dans lequel nous utilisons les deux contour et frontière propriétés.

Exemple

 div { border: 3px solid red; outline: 3px solid blue; border-radius: 12px; font-size: 20px; font-weight: bold; margin: 30px; padding: 30px; outline-offset: 0.5em; } <h3> Welcome to the javaTpoint.com </h3> In this div element, we are using both outline and border properties. The outline is represented by blue color and border is by red color. 

Sortir