Propriétés frontaliers CSS
Les CSS border propriétés vous permettent de spécifier le style, la largeur et la couleur de la bordure d'un élément.
Cet élément a une bordure de rainure qui est 15px large et vert.
Style de bordure
Le border-style propriété spécifie quel type de frontière à afficher.
Les valeurs suivantes sont autorisées:
-
dotted- Définit une bordure en pointillés - en
dashed- Définit une bordure en pointillés -
solid- Définit une bordure solide -
double- Définit une bordure double -
groove- Définit une bordure rainurée 3D. L'effet dépend de la valeur border-color -
ridge- Définit une bordure striée 3D. L'effet dépend de la valeur border-color -
inset- Définit une bordure en médaillon 3D. L'effet dépend de la valeur border-color -
outset- Définit une frontière de départ 3D. L'effet dépend de la valeur border-color -
none- Définit pas de frontière -
hidden- Définit une bordure cachée
Le border-style propriété peut avoir une à quatre valeurs (pour la bordure supérieure, la bordure droite, bordure inférieure, et la frontière gauche).
Exemple
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.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}Résultat:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A mixed border.
Essayez - le vous - même »  | Remarque: Aucun des autres propriétés CSS frontalières décrites ci - dessous aura un effet à moins que le border-style propriété est définie! |
|---|
Largeur de la bordure
Le border-width propriété spécifie la largeur des quatre frontières.
La largeur peut être définie comme une taille spécifique (en px, pt, cm, em , etc) ou en utilisant l' une des trois valeurs prédéfinies: mince, moyenne ou épaisse.
Le border-width propriété peut avoir une à quatre valeurs (pour la bordure supérieure, la bordure droite, bordure inférieure, et la frontière gauche).
Exemple
p.one
{
border-style: solid;
border-width: 5px;
}
p.two
{
border-style: solid;
border-width: medium;
}
p.three
{
border-style: solid;
border-width: 2px 10px 4px 20px;
}
Essayez - le vous - même » Couleur de la bordure
Le border-color propriété est utilisée pour définir la couleur des quatre frontières.
La couleur peut être définie par:
- name - spécifier un nom de couleur, comme "red"
- Hex - spécifier une valeur hexadécimale, comme "#ff0000"
- RGB - spécifier une valeur RGB, comme "rgb(255,0,0)"
- transparent
Le border-color propriété peut avoir une à quatre valeurs (pour la bordure supérieure, la bordure droite, bordure inférieure, et la frontière gauche).
Si border-color est pas défini, il hérite de la couleur de l'élément.
Exemple
p.one
{
border-style: solid;
border-color: red;
}
p.two
{
border-style: solid;
border-color: green;
}
p.three {
border-style: solid;
border-color: red green blue yellow;
} Essayez - le vous - même » Border - Sides individuels
A partir des exemples ci-dessus vous ont vu qu'il est possible de spécifier une frontière différente pour chaque côté.
En CSS, il y a aussi des propriétés pour spécifier chacune des frontières (en haut, à droite, en bas et à gauche):
Exemple
p
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
} Essayez - le vous - même » L'exemple ci-dessus donne le même résultat que celui-ci:
Alors, voici comment cela fonctionne:
Si le border-style propriété dispose de quatre valeurs:
- border-style : double continue parsemée en pointillés;
- bordure supérieure est parsemée
- bordure droite est solide
- bordure inférieure est le double
- bordure gauche est en pointillés
Si le border-style propriété dispose de trois valeurs:
- border-style : pointillé à double solide;
- bordure supérieure est parsemée
- frontières droite et gauche sont solides
- bordure inférieure est le double
Si le border-style propriété dispose de deux valeurs:
- border-style : pointillé solide;
- bordures supérieure et inférieure sont en pointillé
- frontières droite et gauche sont solides
Si le border-style propriété a une valeur:
- border-style : pointillé;
- les quatre frontières sont parsemées
Le border-style propriété est utilisée dans l'exemple ci - dessus. Cependant, il fonctionne également avec border-width et border-color .
Border - Propriété Shorthand
Comme vous pouvez le voir dans les exemples ci-dessus, il y a beaucoup de propriétés à prendre en compte lorsqu'ils traitent avec des frontières.
Pour raccourcir le code, il est également possible de spécifier toutes les propriétés individuelles des frontières dans une propriété.
La border propriété est un raccourci pour les propriétés frontalières individuelles suivantes:
-
border-width -
border-style(obligatoire) -
border-color
Autres exemples
Toutes les propriétés de bordure supérieure dans une déclaration
Cet exemple montre un raccourci pour définir toutes les propriétés de la bordure supérieure dans une déclaration.
Définir le style de la bordure inférieure
Cet exemple montre comment définir le style de la bordure inférieure.
Régler la largeur de la bordure gauche
Cet exemple montre comment définir la largeur de la bordure gauche.
Définissez la couleur des quatre frontières
Cet exemple montre comment définir la couleur des quatre frontières. Il peut avoir de un à quatre couleurs.
Définissez la couleur de la bordure droite
Cet exemple montre comment définir la couleur de la bordure droite.
Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4»
Toutes les propriétés CSS Border
| Propriété | La description |
|---|---|
| border | Définit toutes les propriétés de la frontière dans une déclaration |
| border-bottom | Définit toutes les propriétés de fond à la frontière dans une déclaration |
| border-bottom-color | Définit la couleur de la bordure inférieure |
| border-bottom-style | Définit le style de la bordure inférieure |
| border-bottom-width | Définit la largeur de la bordure inférieure |
| border-color | Définit la couleur des quatre frontières |
| border-left | Définit toutes les propriétés de bordure gauche dans une déclaration |
| border-left-color | Définit la couleur de la bordure gauche |
| border-left-style | Définit le style de la bordure gauche |
| border-left-width | Définit la largeur de la bordure gauche |
| border-right | Définit toutes les propriétés de bordure droite dans une déclaration |
| border-right-color | Définit la couleur de la bordure droite |
| border-right-style | Définit le style de la bordure droite |
| border-right-width | Définit la largeur de la bordure droite |
| border-style | Définit le style des quatre frontières |
| border-top | Définit toutes les propriétés haut de la frontière dans une déclaration |
| border-top-color | Définit la couleur de la bordure supérieure |
| border-top-style | Définit le style de la bordure supérieure |
| border-top-width | Définit la largeur de la bordure supérieure |
| border-width | Définit la largeur des quatre frontières |