Un guide complet des bordures et des contours CSS

Les bordures et les contours CSS sont des outils précieux pour les concepteurs de sites Web qui cherchent à ajouter du style à un site. Ils sont faciles à utiliser une fois que vous savez comment ils fonctionnent et sont suffisamment polyvalents pour répondre à un large éventail de besoins. Examinons les bordures CSS pour voir par où commencer.

Quelle est la différence entre une bordure et un contour en CSS ?

Les contours et les bordures CSS forment deux des couches externes de le modèle de boîte CSS, assis entre les bordures et les marges. Bien que ces propriétés soient similaires, elles ont des valeurs et des objectifs différents.

D’une part, les contours CSS se situent en dehors des frontières. Cela signifie qu’ils peuvent chevaucher du contenu en dehors de l’élément auquel vous les appliquez. Parallèlement à cela, les bordures CSS modifient les dimensions d’un élément, mais pas les contours.

Si vous avez des difficultés à visualiser les styles de bordure et de contour, vous pouvez utiliser votre outils de développement du navigateur pour déboguer leur.

CSS Border & Outline Valeurs de propriété partagées

Malgré leurs différences, les bordures et contours CSS partagent certaines de leurs valeurs. Le raccourci que vous utilisez pour chacun est également très similaire.

Bordure et contour CSS abrégés

Comme d’autres propriétés CSS complexes, les bordures et les contours ont un raccourci disponible. Ces deux propriétés partagent le même format pour leurs options de raccourci et cela ressemble à ceci.

border: width style color;
outline: width style color;

Cela crée des règles qui ressemblent à ceci lorsqu’elles sont en action. Bien sûr, cependant, ce raccourci ne couvre pas toutes les valeurs disponibles pour ces propriétés.

border: 10px solid blue;
outline: 20px solid red;

Ces règles de bordure et de contour CSS raccourcies se traduisent par une fine bordure bleue avec un contour rouge épais.

Comme d’autres propriétés CSS abrégées, vous pouvez également utiliser des propriétés individuelles pour obtenir les mêmes résultats.

Largeur de bordure CSS et largeur de contour

Les largeurs de bordure et de contour sont des valeurs de propriété CSS facultatives qui définissent l’épaisseur des bordures et des contours que vous utilisez. Le format de ces propriétés est le même.

outline-width: 20px;
border-width: 10px;

Les bordures permettent de définir des largeurs individuelles pour chaque côté de l’élément, mais pas les contours. Vous pouvez en savoir plus à ce sujet dans les sections suivantes.

Style de bordure CSS et style de contour

Les bordures et les contours CSS sont disponibles dans une variété de styles. Les bordures pleines sont les plus courantes, mais vous pouvez faire preuve de créativité avec la façon dont vous utilisez les bordures et les contours.

border-style: solid;
outline-style: dotted;

Vous trouverez une liste complète des différents styles de bordure et de contour CSS à la fin de cet article.

Couleur de bordure CSS et couleur de contour

Comme avec les autres propriétés CSS basées sur la couleur, les bordures et les contours acceptent toutes les couleurs légales CSS. Cela inclut les codes hexadécimaux, les codes RVB, les couleurs abrégées, etc.

border-color: blue;
outline-color: 

Vous pouvez également utiliser des dégradés de couleurs lorsque vous travaillez avec des bordures et des contours CSS.

Valeurs des propriétés CSS Border

Outre leurs valeurs de propriété partagées, les bordures et les contours ont également des valeurs uniques à explorer. Les bordures CSS ont deux propriétés uniques qui méritent d’être apprises.

rayon de bordure CSS

L’ajout d’un rayon à la bordure d’un élément vous donne beaucoup de contrôle sur sa forme. Chaque coin d’un élément peut avoir un rayon différent, et cette propriété peut être définie même lorsque border-style est défini sur none.

border-radius: 20px;

Vous pouvez définir une seule valeur pour modifier le rayon de tous les coins.

Vous pouvez également diviser les coins en groupes en haut à gauche/en bas à droite et en haut à droite/en bas à gauche.

border-radius: 10px 20px;

Cela facilite la création de formes intéressantes avec vos éléments HTML.

Enfin, vous pouvez définir chaque coin pour avoir son propre rayon.

border-radius: 10px 20px 30px 40px;

Ces valeurs s’appliquent dans le sens des aiguilles d’une montre à partir du coin supérieur gauche.

Propriétés côté bordure CSS

Contrairement aux contours, vous pouvez définir chaque côté d’une bordure pour qu’il ait une valeur unique pour bon nombre de ses propriétés. Cela permet de donner à chaque côté de votre élément une largeur différente.

border-left-width: 10px;
border-right-width: 20px;
border-top-width: 30px;
border-bottom-width: 40px;

Vous pouvez également définir des styles de bordure CSS indépendants pour chaque côté d’un élément.

border-left-style: solid;
border-right-style: dotted;
border-top-style: dashed;
border-bottom-style: double;

Et vous pouvez changer la couleur de chaque côté si vous le souhaitez.

border-left-style: blue;
border-right-style: 
border-top-style: 
border-bottom-style: rgb(0, 0, 255);

Les bordures CSS fonctionnent avec le raccourci habituel pour se combiner comme ceci.

border-left: 10px solid blue;
border-right: 20px dotted 
border-top: 30px dashed 
border-bottom: 40px double rgb(0, 0, 255);

Valeurs des propriétés CSS Outline

Comme les bordures CSS, les contours ont une propriété unique qui leur est propre ; décalage de contour.

Décalage du contour CSS

L’ajout d’un décalage à un contour crée un espace entre lui-même et l’élément principal. Ce décalage doit être le même pour chaque côté du contour et la propriété n’accepte qu’une seule valeur.

outline-offset: 10px;

Cela peut être un moyen pratique d’utiliser une troisième bordure pour vos éléments qui correspond à la couleur de votre arrière-plan.

Styles de bordure et de contour CSS

Les bordures et les contours ont besoin d’un style pour fonctionner. Vous avez le choix entre dix styles, y compris des bordures qui ne s’affichent pas du tout.

border-style: solid;
border-style: dotted;
border-style: dashed;
border-style: groove;
border-style: ridge;
border-style: double;
border-style: inset;
border-style: outset;
border-style: hidden;
border-style: none;

Les bordures partagent les mêmes styles avec les contours, uniquement avec le style de contour défini comme propriété.

Comment utiliser les bordures et contours CSS

Les contours et les bordures sont d’excellents outils de conception pour les créateurs de sites Web. Vous pouvez définir l’apparence de votre site Web avec ces propriétés CSS, mais vous devrez faire preuve de créativité.

— to www.makeuseof.com