Comment ajuster la largeur de la bordure à l'aide de CSS

Dans HTML, les frontières sont conçues pour créer des différences entre deux sections et pour styliser un élément. À cette fin, le «frontière«La propriété de CSS est utilisée. Cette propriété vous permet d'ajuster la largeur, le style et la couleur de la bordure. La largeur de la frontière dépend de l'apparence de l'élément dans laquelle nous appliquons cette propriété.

Dans ce manuel, nous apprendrons à ajuster la largeur de la frontière.

Commençons!

Quelle est la propriété «frontière» dans CSS?

En HTML, pour concevoir une bordure autour d'un élément, le «frontière»La propriété est utilisée. Fondamentalement, il s'agit d'une propriété scoris de «largeur de la bordure","style de bordure", et "couleur de la bordure". Il est utilisé pour régler la largeur de la bordure, le style de la bordure et la couleur de la bordure.

La syntaxe des biens frontaliers est:

Border: Couleur de style largeur

Voici la description des valeurs données:

• • largeur: Il est utilisé pour ajuster la largeur de la bordure.
  • style: Il est utilisé pour le style de la frontière, comme un solide, une crête ou un double.
  • couleur: Il est utilisé pour changer la couleur de la bordure.

Le "frontière»La propriété sera mise en œuvre dans l'exemple suivant.

Exemple: créer une bordure à l'aide de CSS

Dans cet exemple, nous créerons une bordure autour d'une section HTML et attribuerons la classe "frontière«À lui. À l'intérieur de la section, nous ajouterons un paragraphe en utilisant le

étiqueter:

"Le succès n'est pas définitif; l'échec n'est pas fatal:
C'est le courage de continuer qui compte."- Winston S. Churchill

Après cela, nous nous déplacerons vers le CSS et ajusterons la longueur de la bordure à l'aide du «frontière" propriété.

Ici, nous utiliserons ".frontière«Pour accéder à la classe que nous avons affectée à la section. Nous avons fixé la valeur de la largeur "5px", style "solide", et couleur "RVB (142, 26, 153)". Enfin, la couleur d'arrière-plan de la section est spécifiée comme «Reg (214, 159, 181)»:

.frontière
Border: 5px RVB solide (142, 26, 153);
Color en arrière-plan: RVB (214, 159, 181);

Lorsque tout est terminé, exécutez le fichier HTML pour voir la sortie suivante:

Note: Vous pouvez également augmenter ou diminuer la largeur en fonction de votre préférence.

Exemple 2: Ajustez la largeur de la bordure autour d'une image

Dans cet exemple, nous allons ajuster la largeur de la bordure autour d'une image. Pour ce faire, nous ajouterons une image à l'aide de la balise dans le fichier HTML:

Maintenant, passez au fichier CSS et définissez la largeur de bordure, le style, la couleur comme «10px","rainure","RVB (255, 0, 0)", respectivement:

img
Border: 10px Groove RGB (255, 0, 0);

Il nous donnera la sortie suivante:

Note: Dans le "frontière«Propriété, vous devez toujours attribuer une valeur positive à la largeur.

Nous avons offert la méthode pour ajuster la largeur de la bordure autour de n'importe quel élément.

Conclusion

Dans CSS, pour ajuster la bordure autour d'un élément, le «frontière»La propriété est utilisée. Vous pouvez augmenter et diminuer la largeur de la frontière en fonction de l'apparence requise des éléments. Dans cet article, nous avons expliqué comment ajuster la largeur des frontières en utilisant le «frontière»Propriété et en fournir des exemples différents.