English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Le bord de l'élément (Border) entoure le remplissage et le contenu.
Les attributs de bordure CSS vous permettent de définir la zone de bordure du cadre. La bordure peut être un style prédéfini, par exemple une ligne continue, une ligne double, une ligne brisée, etc.peut également être une image. La section suivante présentera comment définir divers attributs pour définir le style du bord (border-de style), la couleur (border-et l'épaisseur (border-width).
border-widthL'attribut width spécifie la largeur de la zone de bordure. C'est un attribut abrégé utilisé pour définir l'épaisseur de tous les quatre côtés du bord de l'élément en même temps.
p {
border-width: moyen 10px épais 15px;
}Vérifiez le test‹/›Remarque :Si border-Si width manque ou n'est pas spécifié, la propriété-width utilise la valeur par défaut (medium).
Bordure abrégéeborder-styleDéfinit le style du bord du cadre, par exemple: solid, dotted, etc. C'est un attribut abrégé utilisé pour définir le type de ligne de tous les quatre côtés du bord de l'élément.
La propriété-L'attribut style peut prendre l'une des valeurs suivantes: none, hidden, dashed, dotted, double, groove, inset, outset, ridge et solid.
none: Pas de bord.
dotted: Définit un bord en ligne brisée
dashed: Définit un bord en ligne brisée
solid: Définit un bord en ligne continu
double: Définit deux bords. La largeur des deux bords est égale à border-Les valeurs de largeur width sont identiques
groove: Définit3D Bordure en rainure. L'effet dépend de la valeur de la couleur de bordure
ridge: Définit3D Bordure en relief. L'effet dépend de la valeur de la couleur de bordure
inset: Définit3D Bordure encastrée. L'effet dépend de la valeur de la couleur de bordure
outset: Définit3D Bordure de début. L'effet dépend de la valeur de la couleur de bordure
p {
border-style: pointillé;
}Vérifiez le test‹/›Bordure abrégéeborder-colorL'attribut spécifiecolorBordure de la boîte. C'est aussi une propriété abrégée utilisée pour définir la couleur de la bordure de tous les quatre côtés de l'élément.
p {
border-style: solide;
border-color: #ff0000;
}Vérifiez le test‹/›Remarque :border-color Si cet attribut est utilisé seul, il ne fonctionnera pas. Utilisez border-La propriété style définit d'abord la bordure.
Bordure abrégéeborder La-CSS est une propriété abrégée pour définir un ou plusieurs attributs de bordure individuels border-style, border-width et border
p {
border: 5color dans une règle unique.45px solide #ff
}Vérifiez le test‹/›Si vous ignorez ou ne spécifiez pas la valeur de l'attribut border lors de la définition de l'attribut abrégé border, vous utiliserez la valeur par défaut de cet attribut (s'il y en a une).
Remarque :border-colorLorsque vous définissez la bordure de l'élément, si la valeur de l'attribut est manquante ou non spécifiée (par exemple border: 5px solide;），le élémentcolorL'attribut utilisé comme valeur border-color。
Dans cet exemple, la bordure sera de largeur5Ligne noire en pointillé de largeur px :
p {
color: noir;
border: 5px solide;
}Vérifiez le test‹/›Mais, avec border-Dans le cas de la propriété style, l'omission de cette valeur ne montrera aucune bordure, car à ce moment-là, border-La valeur par défaut de la propriété style est none.
Dans l'exemple suivant, il n'y aura pas de bordure :
p {
border: 5px #00ff00;
}Vérifiez le test‹/›