CSS frontaliers

Propriétés CSS frontières

Les propriétés de bordure CSS vous permettent de spécifier le style et la couleur de la bordure d'un élément.

Style de bordure

La propriété border-style spécifie le type de bordure à afficher.

Aucun des propriétés de bordure, aura un effet à moins que le border-style propriété est définie!

border-style valeurs:

none: Définit pas de frontière

en pointillés: Définit une bordure en pointillé

en pointillés: Définit une bordure en pointillés

solide: Définit une frontière solide

doubler: Définit deux frontières. La largeur des deux bordures sont les mêmes que la valeur marge de largeur

rainure: Définit une bordure 3D rainuré. L'effet dépend de la valeur border-color

Ridge: Définit une bordure 3D striée. L'effet dépend de la valeur border-color

encart: Définit une bordure 3D encadré. L'effet dépend de la valeur border-color

départ: Définit une frontière départ 3D. L'effet dépend de la valeur border-color

Essayez vous-même: Définissez le style de la frontière

---

Largeur de la bordure

La propriété border-width est utilisée pour définir la largeur de la frontière.

La largeur est fixée en pixels, ou en utilisant l'un des trois valeurs prédéfinies: minces, moyenne ou d'épaisseur.

Remarque: Le "border-width" propriété ne fonctionne pas si elle est utilisée seule. Utilisez le "border-style" de propriété pour définir les frontières d'abord.

Exemple

p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}

Essayez vous-même »

---

Couleur de la bordure

La propriété border-color est utilisée pour définir la couleur de la frontière. La couleur peut être réglé par:

• nom - de spécifier un nom de couleur, comme "rouge"
• RGB - spécifiez une valeur RGB, comme "rgb (255,0,0)"
• Hex - spécifiez une valeur hexadécimale, comme "# FF0000"

Vous pouvez également définir la couleur de la bordure "transparent".

Remarque: Le "border-color" propriété ne fonctionne pas si elle est utilisée seule. Utilisez le "border-style" de propriété pour définir les frontières d'abord.

Exemple

p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}

Essayez vous-même »

---

Frontaliers - côtés individuels

En CSS, il est possible de spécifier des bordures différentes pour différentes parties:

Exemple

p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}

Essayez vous-même »

L'exemple ci-dessus peut également être réglé avec une seule propriété:

Exemple

border-style:dotted solid;

Essayez vous-même »

La propriété border-style peut avoir de une à quatre valeurs.

• border-style: dotted double continue en pointillé;
  • bordure supérieure est parsemée
  • bordure droite est solide
  • border-bottom est le double
  • bordure gauche est en pointillés
• border-style: dotted double continue;
  • bordure supérieure est parsemée
  • bordures droite et gauche sont solides
  • border-bottom est le double
• border-style: dotted solide;
  • bordures supérieures et inférieures sont parsemées
  • bordures droite et gauche sont solides
• border-style: dotted;
  • tous les quatre frontières sont parsemées

La propriété border-style est utilisé dans l'exemple ci-dessus. Toutefois, il travaille également avec border-width et border-color.

---

Frontaliers - Sténographie la propriété

Comme vous pouvez le voir dans les exemples ci-dessus, il existe de nombreuses propriétés à prendre en considération lorsqu'il s'agit de frontières.

Pour raccourcir le code, il est également possible de spécifier toutes les propriétés de bordure individuels dans une propriété. C'est ce qu'on appelle un raccourci.

La propriété border est un raccourci pour les propriétés suivantes frontières individuelles:

• border-width
• border-style (requis)
• border-color

Exemple

border:5px solid red;

Essayez vous-même »

---

Exemples

Toutes les propriétés de bordure top dans une déclaration
Cet exemple montre un raccourci pour la mise en toutes les propriétés de la bordure supérieure dans une déclaration.

Définissez 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 bordures
Cet exemple montre comment définir la couleur des quatre bordures. Il peut avoir de une à quatre couleurs.

Définissez la couleur de la bordure droite
Cet exemple montre comment définir la couleur de la bordure droite.

---

Toutes les propriétés CSS border

Propriété	Description
frontière	Définit toutes les propriétés de bordure dans une déclaration
border-bottom	Définit toutes les propriétés de bordure de fond 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
marge-bas de largeur	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 de bordure top 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