Come fare a

Incorniciare il testo e le immagini
usando la proprietà CSS border

Sommario:
Per verificare i vostri codici, prima di inserirli, potete usare l'HTML editor.

PREMESSA: le regole di stile, negli esempi, vengono indicate "inline", ma è sottointeso che possano essere inserire in un file css esterno con le corrette modalità (vedi: Il foglio di stile). L'inserimento in un file esterno è sempre consigliata, anche per il completamento con i vendor prefixes necessari (non riportati negli esempi per motivi di spazio e chiarezza).

Partiamo dalle cornici più semplici....

La cornice di base:

Ciao

Codice:
<div style="width:100px; height:50px; border:1px solidblue;">
Testo
</div>

I parametri da personalizzare sono quelli in rosso, in questo modo:
Cambiando il modello e il colore, potete creare altre cornici. Vi metto, sotto, gli esempi, con i relativi codici. I parametri che si possono variare, sono sempre quelli descritti sopra.

Tutti gli stili delle cornici:


solid
dotted
dashed
double
groove
ridge
inset
outset



Con alcuni stili, è necessario un minimo di spessore del bordo di 3-4px, per poterne vedere l'effetto.
È possibile impostare stili diversi per i diversi lati usando questa regola:
border-style: dotted solid dashed double;
Ciao

Le regole seguono l'ordine stabilito (top, right, bottom, left). Per approfondimento leggi anche: "Margin e padding"

Cornice con ombreggiatura:

Testo

<div style="width:10%;
 box-shadow:5px 5px 3px #a3a0a1;
 background-color:#ffffff;
 vertical-align:middle;
 text-align:center;
 border:1px solid black;">
 Testo
 </div>

Cornice doppia con outline e stili differenti:

Cornice doppia con stili differenti

Codice:
<div style="border: 1px solid black; outline: 5px dotted red;">
Cornice doppia con stili differenti
</div>

Outline

Una outline è una linea che viene disegnata attorno agli elementi, al di fuori dei bordi. Lo scopo, per definizione, è quello di metterli in evidenza.
Le caratteristiche vengono impostate come per il bordo, ma non può avere angoli arrotondati.

Cornice con sfondo colorato:

Giallo

Se volete mettere uno sfondo colorato alla cornice dovete aggiungere il parametro background: yellow;, cambiando il colore secondo i vostri gusti, ma sempre con il nome in inglese, o col suo codice web (). Il parametro può essere inserito, nella posizione che vedete sotto, in ognuno dei codici precedenti:
<div style="background:yellow;
border:1px solid blue;">
</div>

Cornice con sfondo colorato e spazio tra bordo e testo:

5px dal bordo

Se volete mantenere uno spazio predefinito tra il bordo e il testo, dovete aggiungere il padding, così...
<div style="background:lightgray;
border:1px solid gray;padding:5px"></div>

Incorniciare un'immagine

esempio border immagine

Per incorniciare una immagine, il codice è questo:

<img style="border: 4px solid red" src="URL immagine" alt="">

Una cornice più particolare:

Titolo Testo

Codice:
 <fieldset style="border: 2px double green"><legend style="color: red; font-family: papyrus;"><strong>Titolo</strong></legend> Testo</fieldset>

I parametri modificabili, sono quelli in rosso, in questa maniera:

Casella di testo con scrollbar:


Casella di testo con scrollbar verticale. Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

Codice:
<div style="height:120px;width:200px;border:2px solid green;font:12px Arial;overflow:auto">testo</div>

I valori modificabili sono quelli in rosso, in questo modo..
Lo scrollbar appare solo se la lunghezza del testo supera la dimensione del box.

Cornice per div responsive:

Data l'attuale necessita` di ottimizzare il sito per il mobile, credo sia interessante creare un contenitore che possa adattarsi, in automatico, alle varie dimensioni dello schermo.

Il metodo per ottenere questo risultato è il seguente:
<div style="width:100%;max-width:300px; color: navy; background-color: pink; border: 2px solid blue; padding: 5px;">
<p>Il mio testo</p>
</div>

Come vedete, la larghezza è indicata al 100%, con limpostazione di una larghezza massima. Non e` indispensabile indicare l'altezza.

Cornice responsive con angoli arrotondati:

Testo
<div style="width:100%;max-width:300px;border-radius:10px;border:1px red solid;overflow:hidden">
<div style="background-color:#eeeeee;padding:5px">
Testo
</div>
</div>

Modificate i prametri come indicato in precedenza.

Border radius

La regola border-radius è determina l'arrotondamento degli angoli. Modificando il valore in px associato, modificherete l'ampiezza della curvatura.
Impostando il valore al 50% otterrete il cerchio, oppure l'ovale a seconda che il contenitore, o l'immagine di partenza siano quadrati oppure rettangolari.

Come mettere una cornice ad una intera pagina:

Per incorniciare tutta la pagina, il codice è questo:
<div style="width:100%;border:10px ridge blue;box-sizing: border-box;">
<br>
<br>
<br>
<br>
</div>

Va inserito in alto, al primo posto, nel codice html della pagina.

I parametri che potete cambiare, sono quelli in rosso, secondo le indicazioni date in precedenza

Il comando: box-sizing: border-box; serve ad indicare al browser che il bordo deve essere contenuto nella larghezza totale. Omettendolo, la cornice risulterebbe tagliata.
Fammi sapere se questo argomento ti è stato utile.
Se non lo è stato, puoi inviarmi le tue osservazioni. Grazie 
Continua con: