C'est probablement une réponse tardive, mais je veux partager mes conclusions. J'ai trouvé 2 nouvelles approches à ce problème que je n'ai pas trouvées ici dans les réponses:
Bordure intérieure via la box-shadow
propriété CSS
Oui, l'ombre de boîte est utilisée pour ajouter des ombres de boîte aux éléments. Mais vous pouvez spécifier une inset
ombre, qui ressemblerait plutôt à une bordure intérieure qu'à une ombre. Il vous suffit de définir les ombres horizontales et verticales sur 0px
, et la spread
propriété " " de la box-shadow
sur la largeur de la bordure que vous souhaitez avoir. Ainsi, pour la bordure «intérieure» de 10 pixels, vous écririez ce qui suit:
div{
width:100px;
height:100px;
background-color:yellow;
box-shadow:0px 0px 0px 10px black inset;
margin-bottom:20px;
}
Voici un exemple jsFiddle qui illustre la différence entre box-shadow
bordure et bordure «normale». De cette façon, votre bordure et la largeur de la boîte sont de 100 pixels au total, bordure comprise.
En savoir plus sur box-shadow: ici
Bordure à travers la propriété CSS de contour
Voici une autre approche, mais de cette façon, la frontière serait en dehors de la boîte. Voici un exemple . Comme indiqué dans l'exemple, vous pouvez utiliser la outline
propriété css pour définir la bordure qui n'affecte pas la largeur et la hauteur de l'élément. De cette façon, la largeur de bordure n'est pas ajoutée à la largeur d'un élément.
div{
width:100px;
height:100px;
background-color:yellow;
outline:10px solid black;
}
En savoir plus sur le plan: ici