Borders dans CSS | Expliqué

Lorsque nous visitons un site Web, nous avons parfois été témoins de beaux cadres autour du texte qui améliorent l'interface utilisateur et aident à améliorer l'interactivité du contenu. Dans CSS, ces cadres sont appelés les frontières et ils jouent un rôle important dans la conception Web. CSS fournit plusieurs propriétés de bordure qui nous permettent de définir le style, la largeur de la frontière, etc.

Cet article présente un aperçu étendu des propriétés frontalières suivantes:

• style de bordure: utilisé pour définir le style de la frontière comme pointillé, solide, etc.
• couleur de la bordure: utilisé pour régler la couleur de la bordure comme le rouge, # 00FF00, etc.
• largeur de la bordure: utilisé pour régler la largeur de la bordure comme épais, mince, pixel, etc.

Cet article expliquera comment utiliser chacune des propriétés susmentionnées à l'aide d'exemples.

Propriété de style frontière CSS

Une propriété qui détermine comment l'apparence de la frontière. La propriété de style frontière CSS fournit les valeurs suivantes:

• caché: Réglez la bordure cachée.
• solide: Réglez la bordure de la ligne continue.
• pointé: Spécifiez la bordure en pointillé.
• en pointillé: Réglez la bordure pointillée.
• double: Réglez la bordure à double ligne.
• rainure: détermine la bordure rainurée 3D.
• crête: Définit la bordure 3D Ridge.
• enrout: détermine la bordure d'encart 3D
• début: Utilisé pour définir la bordure de départ 3D

Note: L'effet 3D de la rainure, de la crête, de l'encart et du départ dépend de la valeur de couleur de la bordure.

Exemple Le code ci-dessous crée plusieurs paragraphes et implémentez toutes les valeurs mentionnées ci-dessus pour montrer les effets de chaque propriété de style frontière CSS:

Html

Paragraphe avec une bordure cachée

Paragraphe avec une bordure solide

Paragraphe avec une bordure en pointillé

Paragraphe avec bordure en pointillés

Paragraphe avec double frontière

Paragraphe avec une bordure de groove

Paragraphe avec bordure de crête

Paragraphe avec bordure d'encart

Paragraphe avec bordure de départ

CSS

.frontière cachée
rembourrage: 0;
Style de la frontière: caché;

.Border solide
rembourrage: 0;
Style de la frontière: solide;

.Border en pointillé
rembourrage: 0;
Style de la frontière: pointillé;

.frontière en pointillés
rembourrage: 0;
Style de la frontière: pointillé;

.Double-frontière
rembourrage: 0;
Style de la frontière: Double;

.groove frontière
rembourrage: 0;
Style de la frontière: groove;

.Ridge Border
rembourrage: 0;
Style de la frontière: crête;

.border inset
rembourrage: 0;
Style de la frontière: encadré;

.Début de la frontière
rembourrage: 0;
Style de la frontière: Début;

Le code ci-dessus générera la sortie suivante:

Propriété CSS Border-Color

Comme son nom lui-même l'indique, il nous permet de spécifier la couleur de la bordure. La couleur peut être spécifiée à l'aide de noms de couleurs prédéfinis, de valeurs hexadécimales, etc. La couleur de chaque côté peut être modifiée individuellement en utilisant des propriétés de couleur bordure-bord.

Exemple Considérons le morceau de code divisé ci-dessous qui spécifie la couleur de la bordure à l'aide du code hexadécimal:

Html

Un exemple de couleur frontière simple.

CSS

p
Style de la frontière: pointillé;
Color à la frontière: # 00F;

Le code ci-dessus générera le code suivant:

Étendons un peu le code ci-dessus pour colorer chaque côté de la bordure différemment.

Html

Un exemple de couleur frontière simple.

CSS

p
Style de la frontière: pointillé;
Border-top-Color: # 00F;
Border-Bottom-Color: # F00;
Border-Left-Color: # 000;
Border-Right-Color: # 0f0;

Nous obtiendrons la sortie suivante:

Propriété CSS à largeur de frontière

La propriété de la largeur de bordure est utilisée pour définir la largeur de la frontière. La propriété de largeur de bordure prend des valeurs soit en termes de pixels, soit une valeur prédéfinie comme épais, mince, etc.

Exemple Considérons le code ci-dessous qui spécifie la largeur de la bordure à 2 pixels:

Html

Un exemple simple de largeur de bordure.

CSS

p
Style de la frontière: solide;
largeur de bordure: 2px;

Nous obtiendrons la sortie suivante:

Propriété CSS Border-Radius

La propriété Border-Radius spécifie une bordure arrondi à un élément et la longueur détermine la forme de ses coins.

Exemple Considérons le morceau de code ci-dessous qui spécifie le Border-Radius comme 10 pixels:

Html

Un exemple simple de la radius frontalière.

CSS

p
Border: 2px solide;
Border-Radius: 10px;

Sortir

La sortie vérifie que la propriété Border-Radius fournit une forme arrondi au coin de la frontière:

Propriété raccourci de la frontière CSS

CSS fournit une propriété raccourci pour la largeur, le style et la couleur de la bordure qui nous permet de mettre en œuvre toutes ces propriétés de bordure en une seule ligne.

Exemple

Dans le code indiqué ci-dessous, nous implémentons plusieurs propriétés dans une seule ligne CSS à l'aide d'une propriété scolare:

Html

Un exemple de propriété de sténographie simple de la frontière.

CSS

p
Border: 3px bleu massif;

Au lieu d'implémenter chaque propriété de bordure individuellement, le code ci-dessus implémente la largeur de la frontière,

La sortie a vérifié que la propriété raccourci a mis en œuvre les trois propriétés de bordure avec succès.

Conclusion

CSS fournit des propriétés de largeur de bordure, de style bordure et de bordure pour régler la largeur de bordure, le style de bordure et la couleur de la bordure d'un élément HTML respectivement. Cet article fournit un aperçu complet des frontières CSS et explique comment créer une bordure, définir la couleur de la bordure, modifier le style de la bordure et définir la largeur de la bordure à l'aide d'exemples simples et faciles à comprendre.