Placer la frontière à l'intérieur de la div et pas sur son bord

Ensemble box-sizing propriété border-box:

CSS:

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;
}

HTML:

<div>Hello!</div>
<div>Hello!</div>

Il fonctionne sur IE8 & au-dessus de.

Il est probablement tardive réponse, 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:

Intérieure de la frontière box-shadow propriété css

Oui, box-shadow est utilisé pour ajouter de la zone-les ombres et les éléments. Mais vous pouvez spécifier inset de l'ombre, qui la faisait ressembler à une frontière intérieure plutôt comme une ombre. Vous avez juste besoin de mettre en horizontal et vertical de l'ombre à 0px, et le "spread" propriété de la box-shadow à la largeur de la bordure que vous voulez avoir. Donc, pour le "intérieure" bordure de 10px vous écrire ce qui suit:

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

Ici est jsFiddle exemple qui illustre la différence entre box-shadow frontière et "normal" de la frontière. De cette façon, votre frontière et la largeur de la zone de sont en de total 100px y compris la frontière.

Plus sur les box-shadow:ici

De la frontière contour propriété css

Ici est une autre approche, mais de cette façon, la frontière serait à l'extérieur de la boîte. Voici un exemple.
Comme suit à partir de l'exemple, vous pouvez utiliser les css outline de la propriété, à la frontière 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é à la largeur d'un élément.

div{
   width:100px;
   height:100px;
   background-color:yellow;
   outline:10px solid black;
}

Plus sur le contour: ici

Utilisation pseudo élément:

CSS:

.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;
}

HTML:

<div class='button'>Hello</div>

À l'aide de ::after vous le style le virtuel dernier enfant de l'élément sélectionné. content propriété crée un anonyme remplacé élément.

Nous sommes contenant le pseudo élément à l'aide de la position absolue par rapport à la mère. Ensuite, vous avez la liberté à n'importe quelle arrière-plan personnalisé et/ou à la frontière dans le fond de votre élément principal.

Cette approche n'a pas d'incidence sur le placement du contenu de l'élément principal, qui est différent de l'utilisation box-sizing: border-box;.

Considérons cet exemple:

CSS:

.parent {
    width: 200px;
}

.button {
    background: #333;
    color: #fff;
    padding: 20px;
    border: 5px solid #f00;
    border-left-width: 20px;
    box-sizing: border-box;
}

HTML:

<div class='parent'>
    <div class='button'>Hello</div>
</div>

Ici .button largeur est limitée à l'aide de l'élément parent. Réglage de la border-left-width ajuste le contenu de la boîte de la taille et donc la position du texte.

CSS:

.parent {
    width: 200px;
}

.button {
    background: #333;
    color: #fff;
    padding: 20px;
    position: relative;
}

.button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid #f00;
    border-left-width: 20px;
}

HTML:

<div class='parent'>
    <div class='button'>Hello</div>
</div>

À l'aide de la pseudo-élément approche n'affectent pas le contenu-la taille de la boîte.

Selon l'application, l'approche à l'aide d'un pseudo-élément peut ou peut ne pas être souhaitable de comportement.

Vous pouvez utiliser les propriétés outline et outline-offset avec une valeur négative au lieu d'utiliser régulièrement border, fonctionne pour moi:

CSS:

div{
    height: 100px;
    width: 100px;
    background-color: grey;
    margin-bottom: 10px; 
}

div#border{
    border: 2px solid red;
}

div#outline{
    outline: 2px solid red;
    outline-offset: -2px;
}

HTML:

Using a regular border.
<div id="border"></div>

Using outline and outline-offset.
<div id="outline"></div>

pour la présentation cohérente entre les nouveaux et les anciens navigateurs, ajouter une à deux conteneurs, l'extérieur avec la largeur, à l'intérieur avec de la frontière.

<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>

c'est évidemment seulement si votre façon précise la largeur est plus important que d'avoir le balisage!

Meilleur navigateur croix de solution (surtout pour IE soutien) comme @Steve a dit, est de faire un div 98px en largeur et en hauteur que d'ajouter une bordure de 1px autour d'elle, ou vous pouvez faire une image d'arrière-plan pour les div 100x100 px et tracer une frontière sur elle.