Bordure CSS
Bordure CSS
Dans ce chapitre, nous parlerons des bordures et de la manière dont nous pouvons leur donner des styles. Nous pouvons définir la largeur, le style et la couleur de la bordure.
Exemple de la propriété border :
Exemple de la propriété border :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p style="border:3px dotted #1c87c9"> Example with a blue dotted border.</p>
<p style="border:3px dashed #ffff00"> Exaxmple with a yellow dashed border.</p>
<p style="border:3px solid #8ebf42"> Example with a green solid border.</p>
</body>
</html>Résultat
Largeur de bordure
La propriété border-width définit la largeur d’une bordure.
La largeur peut être spécifiée en pixels. Elle peut aussi être spécifiée par l’une des trois valeurs prédéfinies : medium, thin ou thick.
Vous ne pouvez pas utiliser la propriété "border-width" seule. Elle ne fonctionnera pas. Utilisez d’abord "border-style" pour définir les bordures.
Exemple de la propriété border-width :
Exemple de la propriété border-width :
<!DOCTYPE html>
<html>
<head>
<style>
p.border-width-1 {
border-style: solid;
border-width: 6px;
}
p.border-width-2 {
border-style: dotted;
border-width: 1px;
}
p.border-width-3 {
border-style: dotted;
border-width: medium;
}
p.border-width-4 {
border-style: double;
border-width: 8px;
}
p.border-width-5 {
border-style: double;
border-width: thick;
}
p.border-width-6 {
border-style: solid;
border-width: 3px 12px 6px 18px;
}
</style>
</head>
<body>
<h2>The border-width Property</h2>
<p class="border-width-1">Example with border-width.</p>
<p class="border-width-2">Example with border-width.</p>
<p class="border-width-3">Example with border-width.</p>
<p class="border-width-4">Example with border-width.</p>
<p class="border-width-5">Example with border-width.</p>
<p class="border-width-6">Example with border-width.</p>
</body>
</html>Couleur de bordure
La propriété border-color est utilisée pour définir la couleur d’une bordure. La couleur peut être définie par :
- nom - spécifie un nom de couleur, comme "red"
- RGB - spécifie une valeur RGB, comme "rgb(255,0,0)"
- Hex - spécifie une valeur hexadécimale, comme "#ff0000"
Vous ne pouvez pas utiliser la propriété "border-color" seule. Elle ne fonctionnera pas. Utilisez d’abord "border-style" pour définir les bordures.
En général, nous écrivons ces trois propriétés ensemble sur une seule ligne.
Exemple de la propriété border-color :
Exemple de la propriété border-color :
<!DOCTYPE html>
<html>
<head>
<style>
p.color-one {
border-style: solid;
border-color: blue;
}
p.color-two {
border-style: dotted;
border-color: yellow;
}
p.color-three {
border-style: solid;
border-color: DarkBlue orange green red;
}
</style>
</head>
<body>
<h2>The border-color Property</h2>
<p class="color-one">Example with blue solid border-color.</p>
<p class="color-two">Example with yellow dotted border-color.</p>
<p class="color-three">Example with multicolor border-color.</p>
</body>
</html>Vous pouvez essayer d’autres exemples avec notre outil CSS Maker.
Style de bordure
La propriété CSS border-style définit le style des quatre côtés des bordures d’un élément. Les bordures sont placées au-dessus de l’arrière-plan d’un élément. Elle peut avoir de une à quatre valeurs. Ainsi, chaque côté peut avoir sa propre valeur. La valeur par défaut de border-style est none.
Border-style a les valeurs suivantes :
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
Certains navigateurs ne prennent pas en charge certains styles. En général, lorsqu’un style n’est pas pris en charge, le navigateur dessine la bordure comme une bordure pleine.
Bordure CSS pour les côtés individuels
CSS fournit des propriétés qui spécifient chaque bordure (droite, gauche, bas et haut).
La propriété border-style peut avoir 4 valeurs, par exemple, border-style: dotted solid double dashed; où la bordure supérieure est en pointillés, la bordure inférieure est double, la bordure droite est pleine et la bordure gauche est en tirets.
La propriété border-style peut avoir 3 valeurs, par exemple, border-style: dotted solid double; où la bordure supérieure est en pointillés, la bordure inférieure est double, et les bordures droite et gauche sont pleines.
La propriété border-style peut avoir 2 valeurs, par exemple, border-style: dotted solid; où les bordures droite et gauche sont pleines, et les bordures supérieure et inférieure sont en pointillés. Et, bien sûr, cette propriété peut n’avoir qu’une seule valeur, par exemple, border-style: solid; où tous les côtés sont pleins.
Exemple des propriétés de bordure pour les côtés individuels :
Exemple de la bordure pour les côtés individuels :
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-top-style: double;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: groove;
}
</style>
</head>
<body>
<p>Example with border individual sides.</p>
</body>
</html>La bordure CSS comme propriété raccourcie
La propriété CSS border est une propriété raccourcie pour les propriétés de bordure individuelles suivantes :
- La propriété CSS border-width, qui définit la largeur des quatre côtés de la bordure d’un élément.
- La propriété CSS border-style, qui définit le style des quatre côtés des bordures d’un élément.
- La propriété CSS border-color, qui définit la couleur des quatre côtés de la bordure d’un élément.
Exemple de la propriété raccourcie border :
Exemple de la propriété raccourcie border :
<!DOCTYPE html>
<html>
<head>
<style>
p.border-all {
border: 3px solid red;
}
p.border-left {
border-left: 4px solid blue;
background-color: #dcdcdc;
}
p.border-top {
border-top: 6px solid green;
background-color: #dcdcdc;
}
</style>
</head>
<body>
<h2>The border Shorthand Property</h2>
<p class="border-all">Example with a shorthand property for border-width, border-style, and border-color.</p>
<p class="border-left">Example with a shorthand property for border-left-width, border-left-style, and border-left-color.</p>
<p class="border-top">Example with a shorthand property for border-top-width, border-top-style, and border-top-color.</p>
</body>
</html>Bordures arrondies
En utilisant la propriété CSS border-radius, vous pouvez ajouter des bordures arrondies à un élément.
Exemple de la propriété border-radius :
Exemple de la propriété border-radius :
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
border: 3px solid blue;
}
p.round-one {
border: 3px solid blue;
border-radius: 6px;
}
p.round-two {
border: 3px solid blue;
border-radius: 9px;
}
p.round-three {
border: 3px solid blue;
border-radius: 15px;
}
</style>
</head>
<body>
<h2>The border-radius Property</h2>
<p class="normal">Example with normal border</p>
<p class="round-one">Example with round border</p>
<p class="round-two">Example with rounder border</p>
<p class="round-three">Example with roundest border</p>
</body>
</html>La différence entre les bordures et les contours
Les contours et les bordures sont souvent confondus parce qu’ils sont très similaires. Mais il existe des différences entre ces deux éléments :
- Les contours sont dessinés à l’extérieur du contenu d’un élément, ils ne prennent donc pas de place.
- Les contours sont généralement rectangulaires, bien qu’ils n’aient pas à l’être.
Practice
Which of the following are properties that can be used to style borders in CSS?