Colocação de borda dentro do div e não na sua borda

Eu tenho um elemento <div> e eu quero colocar uma borda nele. Eu sei que posso escrever style="border: 1px black", mas isto adiciona 2px a cada lado do div, que não é o que eu quero.

Eu preferia que esta borda estivesse a -1px da borda do div. O div em si é 100px x 100px, e se eu adicionar uma borda, então eu tenho que fazer alguma matemática para fazer a borda aparecer.

Existe alguma forma de eu poder fazer a fronteira aparecer, e garantir que a caixa ainda será de 100px (incluindo a fronteira)?

alex
Pergunta editada :em
Programação
css3 html css border
7º março 2012 в 12:16
19 vistas
Solução

Defina a propriedade "tamanho da caixa" para "caixa de fronteira":

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>

Funciona em IE8 & acima.

Gajus
Resposta editada :em
Comentários (10)

Você também pode usar box-shadow como este:

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

Exemplo aqui: http://jsfiddle.net/nVyXS/ (pairar para ver a fronteira)

Isto funciona apenas em navegadores modernos. Por exemplo: Sem suporte do IE 8. Veja caniuse.com (funcionalidade box-shadow) para mais informações.

mkelley33
Resposta editada :em
Comentários (14)

para uma renderização consistente entre navegadores novos e antigos, adicione um contentor duplo, o exterior com a largura, o interior com a borda.

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

isto só é obviamente se a sua largura precisa for mais importante do que ter uma marcação extra!

Comentários (0)