Brand binnenin div plaatsen en niet op de rand

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

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

Antwoord 2, autoriteit 62%

Je kunt box-shadow ook als volgt gebruiken:

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

Voorbeeld hier: http://jsfiddle.net/nVyXS/(beweeg om de rand te bekijken)

Dit werkt alleen in moderne browsers. Bijvoorbeeld: Geen IE 8-ondersteuning.
Zie caniuse.com (box-shadow-functie)voor meer informatie.

Antwoord 3, autoriteit 15%

Waarschijnlijk is het een laat antwoord, maar ik wil mijn bevindingen delen. Ik heb 2 nieuwe benaderingen voor dit probleem gevonden die ik hier niet in de antwoorden heb gevonden:

Binnenrand door box-shadowcss-eigenschap

Ja, box-shadow wordt gebruikt om box-shadows aan de elementen toe te voegen. Maar u kunt de inset-schaduw specificeren, die eruitziet als een binnenrand in plaats van als een schaduw. U hoeft alleen horizontale en verticale schaduwen in te stellen op 0pxen de eigenschap “spread” van de box-shadowop de breedte van de rand jij wil hebben. Dus voor de ‘binnenste’ rand van 10px zou je het volgende schrijven:

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

Hier is een jsFiddlevoorbeeld dat het verschil illustreert tussen box-shadowrand en ‘normale’ rand. Op deze manier zijn je rand en de breedte van het vak in totaal 100px inclusief de rand.

Meer over box-shadow:hier

Rand door CSS-eigenschap omtrek

Hier is een andere benadering, maar op deze manier zou de grens buiten de gebaande paden vallen. Hier is een voorbeeld.
Zoals uit het voorbeeld volgt, kunt u de css outlineeigenschap gebruiken om de rand in te stellen die geen invloed heeft op de breedte en hoogte van het element. Op deze manier wordt de randbreedte niet opgeteld bij de breedte van een element.

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

Meer over Outline: hier

4, Autoriteit 7%

Yahoo! Dit is echt mogelijk. Ik heb het gevonden.

Voor onderrand:

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

Voor bovenrand:

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

5, Autoriteit 4%

Gebruik pseudo-element :

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

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

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

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

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

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

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

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

<div>
  <p>It was popularised in the 1960s with the release of Letraset sheets</p>
</div>

<div id='parentDiv' style='position:relative'>
  <div id='parentDivsContent'></div>
  <div id='fakeBordersDiv' 
       style='position: absolute;width: 100%;
              height: 100%;
              z-index: 2;
              border: 2px solid;
              border-radius: 2px;'/>
</div>

input {
  padding: 8px;
}
input.invalid {
  border: 2px solid red;
  padding: 6px; // 8px - border or "calc(8px - 2px)"
}