Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Eae galera, gostaria de saber se tem algum codigo que coloca o border inside, se isso é possivel?
a borda é fora, queria saber se da pra coloca interna
a borda é fora, queria saber se da pra coloca interna
Como assim cara? não faz sentido.
só queria saber se existe border inside tipo um quadrado é 300px se eu coloca borda 20 px ele vai pra 320px, se existisse borda inside iria criar uma borda de 20px dentro do de 300px e iria continua sendo 300px com uma borda dentro dele tendeu? ainda n existe isso nao neh
só queria saber se existe border inside tipo um quadrado é 300px se eu coloca borda 20 px ele vai pra 320px, se existisse borda inside iria criar uma borda de 20px dentro do de 300px e iria continua sendo 300px com uma borda dentro dele tendeu? ainda n existe isso nao neh
Existe, foi o que eu fiz utilizando a propriedade box-sizing: border-box;
Ele não soma a borda e sim insere dentro do elemento.
Recomendo que leia este post: http://sergiolopes.org/css-box-sizing-border-box/
Veja: http://jsfiddle.net/yWuhU/2078/
A div continua com 100px de altura e largura e a borda não é somada.
Existe, ao criar o border, faça assim:
.caixacomborda{
border: inset 5px red;
}Tente usar:
div{
border:5px solid #e2e2e2;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
}Você pode colocar um border normal, o que você gostaria que estivesse dentro do seu elemento, e depois colocar uma por fora, da cor do background, para dar o efeito que você deseja à primeira borda. Você pode usar o outline para fazer isso, por exemplo, digamos que queremos dar esse efeito aos gadgets de um blog (utilizando o blogger):
.sidebar .widget {
background: #ccc;
border: 1px solid #bdbdbd;
outline: #ccc solid medium;
}
O resultado é esse
/applications/core/interface/imageproxy/imageproxy.php?img=http://i58.tinypic.com/1213b5c.png&key=aa9989f96a59dc37c193707709ef6657a02ace1d591f7d0fc4e08bd0d1adc3a4" alt="1213b5c.png" />
Espero ter ajudado. Se não tiver entendido bem pode dizer, eu não soube explicar muito bem, admito, hehe ^^
Assim:
http://jsfiddle.net/yWuhU/