Style de bordure CSS
La propriété CSS border-style spécifie le type de bordure à afficher. Il existe dix valeurs possibles que vous pouvez utiliser pour définir la propriété border-style. Examinons-les rapidement ci-dessous.
None : ne spécifie aucune bordure
Solid : indique une bordure solide
Pointillé : spécifie une bordure pointillée
Pointillé : spécifie une bordure en pointillés
Double : spécifie une bordure double
Groove : spécifie une bordure rainurée en 3D
Ridge : spécifie une bordure striée en 3D
Inset : spécifie une bordure inset en 3D, qui fait apparaître l’élément encastré.
Outset : spécifie une bordure de sortie en 3D, qui donne à l’élément l’apparence d’un relief
Hidden : spécifie une bordure cachée
L’effet des valeurs groove, ridge, inset et outset dépend de la valeur définie pour la propriété border-color. Si aucune valeur de couleur de bordure n’est donnée, le noir est la valeur par défaut.
La propriété border-style peut avoir entre une et quatre valeurs. Si une seule valeur est définie, elle s’applique à tous les côtés de l’élément. Si deux valeurs sont définies, la première représente les bordures supérieure et inférieure et la seconde, les bordures droite et gauche. Si trois valeurs sont définies, la première valeur représente la bordure supérieure, la deuxième représente les bordures gauche et droite, et la quatrième représente la bordure inférieure. Si quatre valeurs sont définies, elles représentent respectivement le haut, la droite, le bas et la gauche.
Voyons des exemples de toutes ces valeurs ci-dessous.
Voir le stylo zYZyMmx de Christina Perricone ( @hubspot ) sur CodePen .
CSS Border Width
La propriété CSS border-width spécifie la largeur de la bordure. Vous pouvez définir cette propriété à l’aide de valeurs de mots-clés ou de valeurs de longueur. Examinons-les rapidement ci-dessous.
Valeurs des mots-clés : mince, moyen, épais
Valeurs de longueur : px, pt, em, rem, vh, etc.
Comme la propriété border-style, la propriété border-width peut avoir entre une et quatre valeurs. Si une seule valeur est définie, elle s’applique à tous les côtés de l’élément. Si deux valeurs sont définies, la première représente les largeurs de bordure supérieure et inférieure et la seconde, les largeurs de bordure droite et gauche. Si trois valeurs sont définies, la première valeur représente la largeur de la bordure supérieure, la deuxième représente la largeur des bordures gauche et droite, et la quatrième représente la largeur de la bordure inférieure. Si quatre valeurs sont définies, elles représentent respectivement le haut, la droite, le bas et la gauche.
Examinons ci-dessous des exemples définis par différentes valeurs de largeur de bordure.
Largeur de bordure CSS .
Couleur de la bordure CSS
La propriété CSS border-color spécifie la couleur de la bordure. Vous pouvez définir cette propriété à l’aide de noms de couleur, de codes de couleur hexadécimaux, de valeurs RGB ou RGBA, et de valeurs HSL ou HSLA.
Comme les propriétés border-style et border-width, la propriété border-color peut avoir entre une et quatre valeurs. Si une seule valeur est définie, elle s’applique à tous les côtés de l’élément. Si deux valeurs sont définies, la première valeur représente les couleurs de bordure supérieure et inférieure et la seconde, les couleurs de bordure droite et gauche. Si trois valeurs sont définies, la première valeur représente la couleur de bordure supérieure, la deuxième représente les couleurs de bordure gauche et droite, et la quatrième représente la couleur de bordure inférieure. Si quatre valeurs sont définies, elles représentent respectivement le haut, la droite, le bas et la gauche.
Examinons ci-dessous des exemples définis par différentes valeurs de couleur de bordure.
CSS Border Color .
Brève description de la bordure CSS
Le raccourci CSS est un groupe de propriétés CSS qui permet de définir simultanément les valeurs de plusieurs propriétés. Ces valeurs sont séparées par des espaces.
La propriété border, par exemple, est un raccourci pour les propriétés de bordure individuelles ci-dessus : border-width, border-style et border-color.
Je pourrais donc écrire les déclarations suivantes en caractères d’imprimerie :
border-width : 5px;border-style : solid;border-color : #00A4BD ;
Ou en une seule déclaration utilisant la propriété border en raccourci :
border : 5px solid #00A4BD ;
Bien que cette propriété abrégée puisse vous faire gagner du temps et rendre votre code plus propre, elle introduit une marge d’erreur. Examinons un problème courant que vous pouvez rencontrer lorsque vous utilisez cette propriété abrégée.
La bordure CSS ne s’affiche pas
Si vous avez défini la propriété shorthand border en CSS et que la bordure ne s’affiche pas, le problème le plus probable est que vous n’avez pas défini le style de la bordure. Si les valeurs des propriétés border-width et border-color peuvent être omises, la propriété border-style doit être définie. Sinon, il n’y aura pas de rendu.
Si les valeurs des propriétés border-width et border-color sont omises, la ligne de bordure sera rendue en noir et aura une largeur d’environ 3px par défaut.
Voici un exemple de bordure qui s’affiche parce qu’elle a été codée correctement, et une bordure qui ne s’affiche pas parce qu’elle a été codée incorrectement.
Bordure CSS non affichée .
Rembourrage des bordures en CSS
La propriété CSS padding crée un espace entre le contenu et la bordure d’un élément. Si la propriété padding n’est pas définie, il n’y a pas d’espace entre le contenu et la bordure de l’élément.
Pour ajouter de l’espace, vous pouvez définir la propriété padding en utilisant des valeurs de longueur ou de pourcentage. Les valeurs doivent être positives. Les valeurs négatives ne seront pas rendues.
Comme les propriétés ci-dessus, la propriété padding peut avoir entre une et quatre valeurs. Si une seule valeur est définie, elle s’applique à tous les côtés de l’élément. Si deux valeurs sont définies, la première représente le remplissage supérieur et inférieur et la seconde, le remplissage droit et gauche. Si trois valeurs sont définies, la première valeur représente le remplissage supérieur, la deuxième représente le remplissage gauche et droit, et la quatrième représente le remplissage inférieur. Si quatre valeurs sont définies, elles représentent respectivement le haut, la droite, le bas et la gauche.
Examinons ci-dessous des exemples définis par différentes valeurs de remplissage.
jOBXXRW .
Ombrage de la bordure en CSS
La propriété CSS box-shadow peut être utilisée en combinaison avec la propriété border pour créer un effet d’ombre. Deux valeurs sont requises pour définir la propriété border-style : le décalage h et le décalage v. Définissons-les ci-dessous :
h-offset : Cette valeur définit le décalage horizontal de l’ombre. Une valeur positive place l’ombre sur le côté droit de la boîte, une valeur négative place l’ombre sur le côté gauche.
v-offset : Cette valeur définit le décalage vertical de l’ombre. Une valeur positive place l’ombre en dessous de la boîte, une valeur négative place l’ombre au-dessus.
Il existe quatre valeurs facultatives que vous pouvez ajouter après les valeurs h- et v-offset pour affecter l’ombre de la boîte. Examinons-les rapidement ci-dessous.
Flou : ajoutez une troisième valeur pour ajouter un effet de flou. Plus le chiffre est élevé, plus l’ombre sera floue.
Étalement : Ajoutez une quatrième valeur pour définir l’étendue de l’ombre. Une valeur positive augmente la taille de l’ombre, une valeur négative la diminue.
Couleur : incluez un nom de couleur, un code hexadécimal ou une autre valeur de couleur pour définir la couleur de l’ombre. Si aucune valeur de couleur n’est incluse, la couleur de l’ombre est la couleur du texte.
Inset : incluez le mot-clé inset pour définir l’ombre à l’intérieur de la boîte.
Vous pouvez également définir plusieurs ombres. Il suffit de séparer l’ensemble des valeurs obligatoires et facultatives par des virgules. Veillez à augmenter les valeurs de décalage h et v des ombres en cascade pour que vous puissiez les voir.
Jetons un coup d’œil aux exemples définis par différentes valeurs de border-shadow ci-dessous.
Ombres de bordure CSS .
Bordure d’image CSS
La propriété CSS border-image vous permet de définir une image comme une bordure au lieu d’une ligne de bordure.
Cette propriété est un raccourci des propriétés border-image-source, border-image-slice, border-image-width, border-image-outset et border-image-repeat. Seules trois propriétés doivent être définies lors de l’utilisation de la propriété abrégée. Ce sont les suivantes :
border-image-source : spécifie l’URL de l’image ou le chemin du fichier
border-image-slice : indique comment découper l’image en tranches
border-image-repeat : indique si l’image de la bordure doit être étirée, répétée ou arrondie.
Pour qu’une bordure d’image soit rendue, la propriété border doit également être définie.
Jetons un coup d’œil aux exemples définis par différentes valeurs de border-image ci-dessous.
Bordure d’image CSS .
Dégradé de bordures CSS
Vous pouvez également utiliser la propriété CSS border-image pour définir un dégradé CSS comme bordure. Pour créer le dégradé de bordure, définissez la propriété border-image sur « linear-gradient » ou « repeating-linear-gradient ». Ensuite, entre parenthèses, ajoutez autant d’arrêts de couleur que vous le souhaitez. Vous pouvez utiliser n’importe quelle combinaison de noms de couleur HTML, de codes de couleur hexadécimaux, de codes de couleur RVB et de valeurs de couleur HSL. Ajoutez ensuite une valeur pour définir la propriété border-image-slice.
Pour que la bordure en dégradé soit rendue, la propriété border doit également être définie.
Jetons un coup d’œil à quelques exemples :
CSS Border Gradient .
Pour en savoir plus sur la création de dégradés de couleurs CSS, consultez la rubrique Comment ajouter et modifier la couleur d’arrière-plan en HTML .
Bordure arrondie en CSS
La propriété CSS border-radius peut être utilisée pour arrondir les bords d’une bordure. Vous pouvez définir cette propriété à l’aide de valeurs de longueur. Plus la valeur est élevée, plus les bords sont arrondis.
Comme les propriétés border-style, border-width, border-color et padding, la propriété border-radius peut avoir entre une et quatre valeurs. Si une seule valeur est définie, elle s’applique à tous les côtés de l’élément. Si deux valeurs sont définies, la première valeur représente les bords supérieur et inférieur de la bordure et la seconde, les bords droit et gauche. Si trois valeurs sont définies, la première valeur représente le bord supérieur, la deuxième représente les bords gauche et droit, et la quatrième représente le bord inférieur. Si quatre valeurs sont définies, elles représentent respectivement le haut, la droite, le bas et la gauche.
Examinons ci-dessous des exemples définis par différentes valeurs de border-radius.
Bordure arrondie en CSS .
Pour savoir comment utiliser cette propriété dans la conception de vos sites Web, consultez la rubrique Comment dessiner un cercle à l’aide de la propriété CSS Border Radius .
Effondrement de la bordure en CSS
Si vous créez un tableau en HTM L et que l’élément de tableau ainsi que les éléments de ligne et de cellule du tableau ont une bordure définie, vous pouvez garder les bordures séparées. Ou bien, vous pouvez les réduire en utilisant la propriété CSS border-collapse.
Voici à quoi ressemblerait un élément de tableau simple avec la propriété border-collapse définie sur « separate ». Veuillez noter que la valeur par défaut de cette propriété étant « separate », vous pouvez la laisser en dehors de votre CSS.
Voici à quoi ressemblerait cet exemple si la propriété border-collapse était définie sur « collapse » à la place.
CSS Border Collapse .
Il est important de noter que si la propriété border-collapse est définie sur « collapse », la propriété border-radius ne sera pas rendue. Vous devez définir la propriété border-collapse sur « separate » pour utiliser la propriété border-radius.
Ajouter des bordures autour des éléments de votre conception de site Web
Les bordures peuvent contribuer à rendre le contenu plus facile à comprendre et plus attrayant sur votre site Web. Le plus intéressant est la facilité avec laquelle il est possible de créer et de styliser des bordures grâce aux propriétés de bordure CSS. Avec une connaissance de base des CSS, vous pouvez ajouter cet élément de conception à vos pages Web rapidement et facilement.
Commentaires récents