CSS Border (Borders)
propriétés CSS frontalières
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
propriété de style frontière précise quel type de frontière à afficher.
propriétéborder-style est utilisé pour définir le style de la bordure
valeur border-style:
none: Pas de bordure par défaut
pointillé: pointillé: Définit un chapiteau
en pointillés: Définit une zone en pointillés
solide: la définition de la frontière solide
double: définir deux limites. Les mêmes valeurs de la largeur de deux frontières et border-width de
gorge: rainure définie bordure 3D. L'effet dépend des valeurs de couleur de la frontière
crête: la définition 3D crête frontière. L'effet dépend des valeurs de couleur de la frontière
encart: Définit une bordure 3D intégré. L'effet dépend des valeurs de couleur de la frontière
départ: Définit une frontière de départ 3D. L'effet dépend des valeurs de couleur de la frontière
Essayez: définir le style de bordure
Largeur de la bordure
Vous pouvez spécifier la largeur de la frontière par l'attribut border-width.
Indique la largeur de la bordure de deux façons: Vous pouvez spécifier la longueur de la valeur, comme 2px ou 0.1em; ou utiliser l'un des trois mots-clés, qui sont minces, moyennes (par défaut) et épais.
Remarque: CSS ne définit pas trois mots - clés largeur spécifique, donc un agent utilisateur peut être mince, moyenne et épaisse respectivement égale à 5px, 3px et 2px, tandis qu'un autre agent utilisateur, respectivement, mis à 3PX, 2px et 1px.
Exemples
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
Essayez »
Couleur de la bordure
propriété border-color définit la couleur de la frontière. Vous pouvez définir la couleur:
- Nom - Indique le nom de la couleur, comme "rouge"
- RGB - spécifier une valeur RVB, tels que "rgb (255,0,0)"
- Hex - Indique la valeur hexadécimale, telles que "# FF0000"
Vous pouvez également définir la couleur de bordure de "transparent".
Remarque: border-color seule ne fonctionne pas, vous devez avoir à utiliser le border-style pour définir le style de bordure.
Exemples
{
Border-style: solide;
Border-color: red;
}
p.two
{
Border-style: solide;
border-color: # 98bf21;
}
Essayez »
Border - réglages séparés pour chaque côté
En CSS, vous pouvez spécifier différentes faces différentes frontières:
Exemples
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
Essayez »
L'exemple ci-dessus peut également définir un seul attribut:
propriété border-style peut avoir une à quatre valeurs:
- Border-style: double continue parsemée en pointillés;
- Les frontières sont parsemées
- Bordure droite est solide
- Une bordure double fond
- Bordure gauche est en pointillés
- border-style: pointillé à double solide;
- Les frontières sont parsemées
- Gauche et bordure droite est solide
- Une bordure double fond
- border-style: pointillé solide;
- Sur le fond est bordure en pointillés
- frontières droite et gauche sont solides
- border-style: pointillé;
- Entouré par une bordure en pointillés
L'exemple ci-dessus utilise le border-style. Cependant, il peut aussi être border-width, border-color ensemble.
Border - propriété raccourcie
L'exemple ci-dessus utilise beaucoup de propriété pour définir la frontière.
T Vous pouvez également définir la frontière dans une propriété.
Vous pouvez attribut "frontière" set:
- border-width
- Border-style (obligatoire)
- Border-color
D'autres exemples
Toutes les propriétés de la frontière dans une déclaration étant
Cet exemple montre un raccourci pour définir les quatre propriétés de bordure dans la même instruction.
style de bordure Réglage
Cet exemple montre comment définir le style de la bordure inférieure.
Réglage de 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. Vous pouvez définir une à quatre couleurs.
Définissez la couleur de la bordure droite
Cet exemple montre comment définir la couleur de la bordure droite.
propriétés CSS frontalières
| propriété | description |
|---|---|
| frontière | propriété Shorthand utilisé pour définir la propriété des quatre côtés dans un communiqué. |
| Border-style | Il est utilisé pour définir le style de bordure de tous les éléments, ou séparément définir le style de bordure de chaque côté. |
| border-width | Tous les frontières propriété abrégée fixe la largeur de l'élément, ou régler individuellement la largeur de chaque côté de la frontière. |
| Border-color | propriété sténographie, l'élément de toute partie visible des couleurs de bordure, ou définir la couleur, respectivement quatre côtés. |
| border-bottom | propriété Shorthand utilisé pour définir tous les attributs de la frontière à une déclaration. |
| -Bottom border-color | Réglez la couleur de la bordure inférieure de l'élément. |
| -Bottom border-style | Réglage des éléments de style de la frontière. |
| border-bottom-width | Régler la largeur de la bordure inférieure de l'élément. |
| border-left | propriété Shorthand utilisé pour définir toutes les propriétés de bordure gauche à une déclaration. |
| border-left-color | Réglez la couleur de l'élément de bordure gauche. |
| border-left style | L'élément du style de bordure gauche. |
| border-left-width | L'élément de la largeur de la bordure gauche. |
| border-right | raccourci pour définir toutes les propriétés à droite de la boîte à une déclaration. |
| couleur border-right | Réglez la couleur de l'élément de bordure droite. |
| Style border-right | L'élément des styles de bordure droite. |
| border-right-width | Régler la largeur de l'élément de bordure droite. |
| border-top | raccourci pour définir toutes les propriétés à la frontière à une déclaration. |
| border-top-color | Element est réglé sur la couleur de la bordure. |
| -Top border-style | Element est situé sur le style de bordure. |
| border-top-width | L'élément est mis sur la largeur de la bordure. |