Définir la bordure intérieure en CSS

Une bordure intérieure peut désigner soit le fait de conserver les dimensions déclarées d’un élément lorsqu’il possède une bordure, soit le fait de tracer un contour visible à l’intérieur de ses bords. Utilisez box-sizing: border-box pour le premier objectif, box-shadow: inset pour obtenir un contour intérieur net, ou une valeur négative pour outline-offset afin de déplacer un contour vers l’intérieur.

Utiliser la propriété box-sizing pour définir la bordure intérieure en CSS

box-sizing: border-box inclut le remplissage et la bordure d’un élément dans sa largeur et sa hauteur déclarées. Cette propriété détermine le calcul des dimensions ; elle ne trace pas de contour distinct à l’intérieur de l’élément. Pour un carré de 200px avec une bordure rouge de 10px, utilisez box-sizing: border-box; width: 200px; height: 200px; border: 10px solid red; background: green;. La boîte extérieure mesure toujours 200 par 200 pixels, et la bordure rouge occupe une partie de cette surface. Ajoutez padding si le contenu doit être éloigné de la bordure. Avec la valeur par défaut content-box, la largeur et la hauteur correspondent à la zone de contenu : le remplissage et les bordures s’ajoutent donc aux dimensions extérieures. border-box est utile lorsqu’un composant doit respecter les dimensions prévues dans une mise en page ; cette valeur ne dispense pas de choisir une épaisseur de bordure adaptée.

Cet exemple JavaScript autonome affiche du HTML avec les mêmes dimensions et la même bordure :

const html = '<div style="box-sizing: border-box; width: 200px; height: 200px; border: 10px solid red; background: green;">Content</div>';
console.log(html);

<div style="box-sizing: border-box; width: 200px; height: 200px; border: 10px solid red; background: green;">Content</div>

Collez le balisage affiché dans un document HTML pour voir le carré aux dimensions fixes.

Utiliser la propriété box-shadow pour définir la bordure intérieure en CSS

Utilisez une valeur inset pour box-shadow lorsque vous voulez obtenir un contour visible sans modifier les dimensions de l’élément dans la mise en page. Pour un carré vert de 200px avec un contour rouge de 10px, appliquez ce CSS à un <div>Content</div> : <div style="width: 200px; height: 200px; background: green; box-shadow: inset 0 0 0 10px red;">Content</div>. Les deux premières valeurs de l’ombre correspondent aux décalages horizontal et vertical ; elles sont toutes deux nulles ici, ce qui donne un contour uniforme sur chaque côté. La troisième valeur définit le flou, réglé à zéro pour obtenir un bord net. La quatrième est la diffusion, qui détermine ici l’épaisseur du contour. inset dessine l’ombre à l’intérieur de la boîte. Modifiez la couleur ou la diffusion pour ajuster son apparence ; le flou et la diffusion peuvent être omis lorsque cela est approprié, car tous deux valent zéro par défaut. Comme l’ombre ne réserve pas d’espace dans la mise en page, les éléments voisins gardent leur position. Si vous définissez également une bordure, celle-ci reste présente et peut recouvrir une partie de l’ombre intérieure.

Utiliser les propriétés outline et outline-offset pour définir la bordure intérieure en CSS

Un contour est tracé autour d’un élément et n’occupe pas d’espace dans la mise en page. Pour déplacer le contour rouge vers l’intérieur, définissez outline: 5px solid red; outline-offset: -5px; sur un <div>Content</div> carré de 200px avec un arrière-plan vert. La valeur négative rapproche le contour du contenu à partir du bord extérieur ; elle ne transforme pas un contour en bordure. Comme le contour est tracé par-dessus l’élément, il peut chevaucher le texte ou d’autres contenus proches du bord. Utilisez cette méthode si ce chevauchement est acceptable, et choisissez box-shadow si vous voulez un contour intérieur qui reste dans la surface peinte de l’élément.