Utilisation des bordures et des arrière-plans en HTML5

Il y a propriétés largement utilisées en HTML et CSS telles que les bordures et les arrière-plans, Depuis l'incorporation de CSS3, ils ont été améliorés de telle manière que nous pouvons avoir des bords arrondis par exemple, bien que cela semble assez simple, cela n'était pas disponible dans le passé, donc ces fonctionnalités facilitent maintenant de manière assez étendue le travail des concepteurs et des développeurs.
Lors de l'application d'une arête, nous devons prendre en compte 3 attributs très importants, à savoir :

• largeur de la bordure: initialise la largeur de la bordure.
• style de bordure: initialise le style de dessin de la bordure.
• couleur de la bordure: initialise la couleur de la bordure.

Une fois que vous êtes familiarisé avec les propriétés, regardons un exemple simple d'application d'une arête :

 Exemple
Il existe de nombreuses sortes de fruits - il existe plus de 500 variétés de bananes à elles seules. Au moment où nous ajoutons les innombrables types de pommes, d'oranges et d'autres fruits bien connus, nous sommes confrontés à des milliers de choix.

Pour définir la largeur de la bordure on peut travailler à partir de 3 mesures, par unités de mesure telles que pixels, cm, em; par pourcentages et par préréglages tels que, mince, moyen et épais.
Nous définissons le type de bordure avec le style, pour cela nous avons les options suivantes :

• rien
• en pointillé
• pointé
• double
• rainure
• encart
• début
• crête
• solide

Voyons maintenant graphiquement ce que chacun de ces styles signifie :

Il y a aussi la possibilité d'appliquer une bordure et un style sur chacun des côtés de l'élément, pour cela nous utiliserons les instructions suivantes :
[couleur = # d3d3d3] border-top-width
border-top-style
border-top-color [/ color]
border-bottom-width
border-bottom-style
border-bottom-color
[couleur = # d3d3d3] border-left-width
border-left-style
border-left-color [/ color]
[color = # d3d3d3] border-right-width
border-right-style
border-right-color [/ color]
Où Haut fait référence au sommet, bas à l'inférieur, la gauche à gauche et droite à droite.
Avec cela, nous pouvons même réaliser des combinaisons de types de bords dans le même élément.
Voyons un exemple de ce dernier :

 Exemple
Il existe de nombreuses sortes de fruits - il existe plus de 500 variétés de bananes à elles seules. Au moment où nous ajoutons les innombrables types de pommes, d'oranges et d'autres fruits bien connus, nous sommes confrontés à des milliers de choix.

Le code nous donne les résultats suivants :

Pour créer les bords arrondis, nous pouvons utiliser la propriété rayon qui nous permet d'indiquer le rayon de courbure de l'arête.
Voyons comment implémenter le code :

 Exemple
Il existe de nombreuses sortes de fruits - il existe plus de 500 variétés de bananes à elles seules. Au moment où nous ajoutons les innombrables types de pommes, d'oranges et d'autres fruits bien connus, nous sommes confrontés à des milliers de choix.

Cela donne l'écran suivant :

Avec cela nous concluons ce tutoriel sur ces éléments, nous pouvons maintenant intégrer des améliorations sur notre CSS sans trop d'effort et avec des outils technologiques de pointe.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif