Placer la bordure à l’intérieur de div et pas sur son bord

Définissez la propriété box-sizing sur border-box :

 div { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; width: 100px; height: 100px; border: 20px solid #f00; background: #00f; margin: 10px; } div + div { border: 10px solid red; } 

 
Hello!
 
Hello! 

Vous pouvez également utiliser box-shadow comme ceci:

 div{ -webkit-box-shadow:inset 0px 0px 0px 10px #f00; -moz-box-shadow:inset 0px 0px 0px 10px #f00; box-shadow:inset 0px 0px 0px 10px #f00; } 

Exemple ici: http://jsfiddle.net/nVyXS/ (survolez pour afficher la bordure)

Cela fonctionne uniquement dans les navigateurs modernes. Par exemple: pas de support IE 8. Voir caniuse.com (fonctionnalité ombrée) pour plus d’informations.

C’est probablement une réponse tardive, mais je veux partager avec mes conclusions. J’ai trouvé 2 nouvelles approches à ce problème que je n’ai pas trouvé ici dans les réponses:

Bordure intérieure à travers la propriété css box-shadow

Oui, box-shadow permet d’append des zones d’ombre aux éléments. Mais vous pouvez spécifier inset ombre en inset , qui ressemblerait à une bordure intérieure plutôt qu’une ombre. Il vous suffit de définir les ombres horizontales et verticales sur 0px , et la propriété ” spread ” de l’ box-shadow de la box-shadow à la largeur de la bordure que vous souhaitez avoir. Donc, pour la bordure “interne” de 10px, écrivez ce qui suit:

 div{ width:100px; height:100px; background-color:yellow; box-shadow:0px 0px 0px 10px black inset; margin-bottom:20px; } 

Voici l’exemple jsFiddle qui illustre la différence entre une bordure d’ box-shadow et une bordure «normale». De cette façon, votre bordure et la largeur de la boîte sont de 100px au total, y compris la bordure.

En savoir plus sur l’ombre des boîtes: ici

Bordure à travers la propriété css du contour

Voici une autre approche, mais de cette façon, la frontière serait hors de la boîte. Voici un exemple . Comme suit, vous pouvez utiliser la propriété css outline 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 la 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 contour: ici

Yahoo! C’est vraiment possible. Je l’ai trouvé.

Pour la bordure inférieure:

 div {box-shadow: 0px -3px 0px red inset; } 

Pour la bordure supérieure:

 div {box-shadow: 0px 3px 0px red inset; } 

Utiliser un pseudo élément :

 .button { background: #333; color: #fff; float: left; padding: 20px; margin: 20px; position: relative; } .button::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 5px solid #f00; } 

 
Hello 

Je sais que c’est un peu plus ancien, mais puisque les mots-clés “border inside” m’ont directement amené ici, j’aimerais partager quelques découvertes qui mériteraient d’être mentionnées ici. Lorsque j’ajoutais une bordure à l’état de vol stationnaire, j’ai eu les effets dont parle OP. La bordure annonce des pixels à la dimension de la boîte qui la rend nerveuse. Il y a deux autres façons de traiter cela qui fonctionnent aussi pour IE7.

1) Avoir une bordure déjà attachée à l’élément et changer simplement la couleur. De cette façon, les mathématiques sont déjà incluses.

 div { width:100px; height:100px; background-color: #aaa; border: 2px solid #aaa; /* notice the solid */ } div:hover { border: 2px dashed #666; } 

2) Compensez votre bordure avec une marge négative. Cela appenda toujours les pixels supplémentaires, mais le positionnement de l’élément ne sera pas difficile sur

 div { width:100px; height:100px; background-color: #aaa; } div:hover { margin: -2px; border: 2px dashed #333; } 

Bien que cette question ait déjà été traitée de manière adéquate avec des solutions utilisant les propriétés box-shadow et outline , j’aimerais développer ceci pour tous ceux qui ont atterri ici (comme moi) à la recherche d’une solution pour une bordure intérieure avec un offset

Donc, disons que vous avez un div noir 100px x 100px et que vous devez l’insérer avec une bordure blanche – qui a un décalage interne de 5px (disons) – cela peut encore être fait avec les propriétés ci-dessus.

boîte ombre

L’astuce consiste ici à savoir que plusieurs ombres-boîtes sont autorisées, où la première ombre est en haut et les ombres ultérieures ont un ordre z inférieur.

Avec cette connaissance, la déclaration box-shadow sera:

 box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white; 

 div { width: 100px; height: 100px; background: black; box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white; } 

pour un rendu cohérent entre les navigateurs anciens et nouveaux, ajoutez un conteneur double, l’extérieur avec la largeur, l’intérieur avec la bordure.

 
 
 contents here 
  

c’est évidemment seulement si votre largeur précise est plus importante que d’avoir un balisage supplémentaire!

Si vous utilisez box-sizing: border-box signifie non seulement une bordure, un remplissage, une marge, etc. Tous les éléments seront inclus dans l’élément parent.

 div p { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; width: 150px; height:100%; border: 20px solid #f00; background-color: #00f; color:#fff; padding: 10px; } 

 
 
It was popularised in the 1960s with the release of Letraset sheets
  

La meilleure solution inter-navigateurs (principalement pour le support IE) comme @Steve dit de créer un div 98px en largeur et en hauteur plutôt que d’append une bordure 1px, ou de créer une image d’arrière-plan pour div 100×100 px.