Essayez la propriété "outline" (contour) Schéma CSS
Les contours n'interfèrent pas avec les largeurs et longueurs des éléments/divs !
Veuillez cliquer sur le lien que j'ai fourni au bas de la page pour voir des démonstrations fonctionnelles des différentes façons de créer des bordures, et des bordures intérieures/lignes, même celles qui ne perturbent pas les dimensions de l'élément ! Il n'est pas nécessaire d'ajouter des divs supplémentaires à chaque fois, comme indiqué dans une autre réponse !
Vous pouvez également combiner des bordures avec des contours et, si vous le souhaitez, des ombres de boîte (également illustré par le lien).
<head>
<style type="text/css" ref="stylesheet">
div {
width:22px;
height:22px;
outline:1px solid black;
}
</style>
</head>
<div>
outlined
</div>
Généralement, par défaut, "border :" place la bordure à l'extérieur de la mesure de la largeur, ajoutant aux dimensions globales, à moins que vous n'utilisiez la valeur "inset" :
div {border: inset solid 1px black};
Mais "outline :" est une bordure supplémentaire en dehors de la bordure, et ajoute bien sûr une largeur/longueur supplémentaire à l'élément.
J'espère que cela vous aidera
PS : J'ai également été inspirée de faire ceci pour vous : Utilisation des bordures, des contours et des ombres de boîtes
