Taille de la bordure CSS

«Dans cet article, nous expliquerons comment modifier la taille de la bordure en utilisant différentes approches dans CSS dans un fichier HTML. Un conteneur Div contient une bordure avec de nombreux styles distincts et des attributs esthétiques comme la couleur, la taille, la forme, etc. Dans cet article, nous utiliserons Notepad ++ pour modifier un fichier HTML en modifiant la taille de la bordure en utilisant différentes propriétés que CSS fournit, comme la largeur de bordure."

Exemple 01: Utilisation de la balise de style CSS pour redimensionner une bordure dans un fichier HTML

Dans cet exemple, nous allons modifier la taille d'une bordure d'un conteneur div en utilisant CSS dans la balise de tête dans un fichier html. Nous définirons une fonction universelle pour tous les conteneurs Div qui seront créés dans ce fichier pour avoir le style d'édition prédéfini que nous définirons dans la section div présente dans la balise de style. Ainsi, pour accomplir cette tâche, nous générerons le script suivant:

Comme nous pouvons le voir dans le script ci-dessus d'un fichier html, nous avons ouvert une balise de style dans laquelle un div est appelé qui a plusieurs propriétés définies une par une. Le premier est le rembourrage, ce qui donnera au conteneur DIV un espace entre la page du navigateur et les frontières. Ensuite, nous avons appelé la propriété de la frontière elle-même et, dans cette propriété, nous définirons la taille de la frontière et le type de bordure; Dans notre cas, il est défini sur «1px» et «solide."Ensuite, nous avons ajouté des kits Web qui prendront en charge les navigateurs les plus couramment utilisés dans la même fonction de propriété. Ensuite, nous avons fermé le style et la tête de tête et ouvert l'étiquette corporelle. Dans cette balise, nous avons mentionné tout ce qui sera présent sur la page une fois ce fichier ouvert dans un navigateur.

Nous avons ajouté une rubrique à l'aide de la balise «H2» et avons également ajouté un conteneur div avec un peu de texte. Ce conteneur div héritera de toutes les propriétés définies dans la balise de style, qui est présente dans l'en-tête du fichier. Ces balises seront fermées après cela. Et maintenant, nous allons enregistrer ce fichier dans le «.Format HTML »et ouvrez-le dans le navigateur pour voir la sortie suivante:

Comme nous pouvons le voir dans la sortie ci-dessus, le cap et le conteneur div sont présents, et la bordure du conteneur est également indiquée avec une taille mince avec un peu de texte.

Nous allons maintenant modifier le script ci-dessus et apporter des modifications à la taille de la bordure dans la balise de style de la section d'en-tête pour visualiser la différence entre la taille de la bordure du conteneur.

Nous avons ajusté la taille de «1px» à «5px» dans le script ci-dessus pour générer une bordure plus épaisse pour le conteneur. Observons maintenant comment ce changement apparaît dans notre navigateur lorsque nous exécutons le script.

Comme nous pouvons le voir dans la sortie ci-dessus que la taille de la bordure est désormais épaisse par rapport à la sortie précédente.

Exemple # 02: Création d'une classe dans la balise de style CSS pour contrôler la taille d'une bordure dans un fichier HTML

Dans cet exemple, nous créerons une classe spéciale de style CSS dans lequel nous définirons tous les aspects du style que nous voulons tout au long du fichier. Ceci est une méthode très utile car nous pouvons distinguer différentes conceptions dans un seul fichier HTML et les classer en différentes classes. Dans cet exemple, nous classerons le style d'une bordure de tout conteneur. Pour y parvenir, nous rédigerons le script suivant:

Comme nous pouvons le voir dans ce script, nous avons ouvert une balise de style dans l'en-tête du fichier HTML. Dans cette balise de style, nous avons créé une classe pour le style de balise de paragraphe dans lequel nous avons défini deux propriétés pour la bordure, qui sont du style et de la largeur. La propriété de style est définie sur solide, ce qui signifie que la bordure sera une ligne uniforme, droite, et la propriété de largeur est définie sur mince, ce qui signifie que la taille de la bordure sera mince. Après cela, nous avons fermé le style et l'étiquette de tête et nous sommes allés vers l'étiquette corporelle. Dans l'étiquette du corps, nous avons donné une rubrique et un paragraphe à la page HTML. Dans la balise de paragraphe, nous avons appelé le «P.classe BW1 ”, qui a les propriétés de la frontière prédéfinies. Nous ferons les balises et enregistrerons ce fichier afin que nous puissions l'exécuter sur notre navigateur.

Après avoir exécuté ce script sur notre navigateur, nous obtiendrons la sortie ci-dessus. Comme nous pouvons le voir, la classe de style de la balise de paragraphe a ajouté une bordure solide et mince au paragraphe présent dans le corps.

Maintenant, nous varierons la taille de la frontière présente dans le script ci-dessus et observerons l'effet de ces variations sur la frontière.

Dans cette situation, nous avons édité la largeur de mince à moyen, et après avoir exécuté ce script, nous obtiendrons la sortie suivante:

Dans cette sortie, la taille de la bordure est passée de mince à moyenne et est maintenant beaucoup plus visible. Après cela, nous changerons la taille de moyenne à épais, comme indiqué dans le script ci-dessous:

Après avoir exécuté ce script, nous obtiendrons la sortie suivante:

Après avoir changé la largeur en épais, nous pouvons voir que la bordure est de taille très large et assez facilement visible.

Exemple # 03: Utilisation de la feuille de style CSS à vent arrière pour modifier la taille de la bordure à l'aide de la classe de bordure

Dans cet exemple, nous utiliserons la feuille de style CSS à vent arrière pour modifier la taille d'une bordure à l'aide d'une classe de bordure définie dans cette feuille de style. La classe Border a plusieurs tailles prédéfinies pour la frontière, que nous explorerons dans cet exemple en mettant en œuvre ceci dans le bloc-notes++.

Dans le script ci-dessus, nous ajouterons le lien à la feuille de style CSS à vent arrière en utilisant la balise de liaison dans l'en-tête du fichier. Ensuite, nous ouvrirons l'étiquette corporelle et nous y donnerons une tête. Ensuite, nous ouvrirons la balise DIV, que nous appellerons la classe de Border-2 avec le code de couleur de bord. Maintenant, nous allons enregistrer ce fichier et l'ouvrir sur notre navigateur pour voir comment la frontière se révèle.

Comme nous pouvons le voir que la taille de la bordure est très mince et peut être ajustée à une taille plus grande, nous allons donc augmenter la taille en appelant la classe Border-8 et voir comment elle change la taille de la bordure.

Comme nous pouvons le voir dans l'extrait ci-dessus, la bordure est maintenant plus épaisse qu'auparavant à cause de la classe de bordure-8.

Conclusion

Dans cet article, nous nous sommes concentrés sur l'attribut «taille» CSS d'une bordure. La taille de la bordure est généralement spécifiée avec deux identifiants: pixels et représentation textuelle, comme «mince», «médium» et «épais."Nous avons discuté de plusieurs méthodes pour modifier la taille de la bordure à l'aide de CSS dans un fichier HTML dans cet article. Nous avons utilisé l'environnement Notepad ++ pour modifier notre fichier HTML et mis en œuvre des méthodes CSS conventionnelles de la balise de style et de la classe de style pour modifier la taille d'une bordure. Nous avons également utilisé la feuille de style CS Tailwind CS pour appeler ses classes de bordure qui ont fourni différentes tailles pour la bordure d'un conteneur et peuvent être appelées via le style CSS en ligne.