[RISOLTO] Creare Bordo INTERNO [CSS]

[Luke Guada]

È possibile tramite CSS creare un bordo interno ad una div??

Mi spiego:

Se creo un div:

<div id="div1x"> etc etc etc </div>

Ora tramite CSS faccio:

#div1x{width:100px;}

Ok, se mi seguite ora abbiamo una div che effettivamente ha come dimensione 100px.
Ora però se vado ad aggiungere al CSS dove è il DIV:

border: 1px black solid;

Avrò una div che invece di essere larga 100px sarà larga 102px, questo perchè sono stati aggiunti due bordi esterni (sinistra 1px, destra 1px), io vorrei far in modo che i bordi vadano all'interno cosi anche se vado ad aggiungere border:10px black solid; la/il DIV sarà sempre di 100px


Non so se mi sono spiegato... come posso risolvere??

 

[criric]

Non puoi semplicemente diminuire la larghezza?

#div1x{
width:98px;
border: 1px black solid;
}

 

[borgo italia]

ciao
credo che la soluzione di criric sia la migliore e la più semplice, ma comunque prova a dare un occhio a
https://www.mrw.it/css/border-image-creare-bordi-immagini_11013.html
certo devi farti un immagine di bck adeguata a quello che vuoi fare

p.s.
non l'ho ancora provata quindi non so esattamente come funzia

 

[Luke Guada]

Non puoi semplicemente diminuire la larghezza?

#div1x{
width:98px;
border: 1px black solid;
}

La stata la prima cosa a cui ho pensato,
però io sto usando le percentuali quindi mi è impossibile togliere 2px o simili...

 

[criric]

Forse puoi ottenere il risultato con la proprietà box-sizing dei css3
prova questo esempio

<style type="text/css">
    p#a {
        width:100px;
        height:60px;
        border:2px solid black;
    }
    p#b {    
        width:100px;
        height:60px;
        border:2px solid black; 
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
    }
</style>
<p id="a">Paragrafo da 100px con bordo</p>
<p id="b">Paragrafo da 100px con box-sizing</p>

e dai un occhiata a questo articolo

 

[Luke Guada]

Forse puoi ottenere il risultato con la proprietà box-sizing dei css3
prova questo esempio

<style type="text/css">
    p#a {
        width:100px;
        height:60px;
        border:2px solid black;
    }
    p#b {    
        width:100px;
        height:60px;
        border:2px solid black; 
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
    }
</style>
<p id="a">Paragrafo da 100px con bordo</p>
<p id="b">Paragrafo da 100px con box-sizing</p>

e dai un occhiata a questo articolo

Sembra proprio funzioni...
Più tardi faccio qualche prova sui div e faccio sapere!

 

[Luke Guada]

RISOLTO...

Sei un grande era proprio ciò che cercavo :Q_