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:

Codice:

I parametri da personalizzare sono quelli in rosso, in questo modo:

• widht:100px= corrisponde alla larghezza del rettangolo, potete inserire il valore che ritenete opportuno, a seconda del testo che inserirete.
• height:50px = corrisponde all'altezza del rettangolo, anche qui, potete mettere il valore che credete. Se non mettete l'altezza, il box si espandera` automaticamente.
• border:1px = questo valore indica lo spessore della cornice, più è alto, più la cornice sarà spessa. Se desiderate una cornice trasparente, impostate il valore su 0.
• solid = solid è lo stile della cornice,ce ne sono diversi tra cui scegliere. Li ho riportati, tutti, più sotto.
• blue = blue è il colore della cornice. Potete mettere il colore che preferite, purchè il suo nome sia sempre scritto in lingua inglese o col suo codice web (color-picker).

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:

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:

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

Cornice con ombreggiatura:

Cornice doppia con outline e stili differenti:

Codice:

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:

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 (color-picker). Il parametro può essere inserito, nella posizione che vedete sotto, in ognuno dei codici precedenti:

Cornice con sfondo colorato e spazio tra bordo e testo:

Se volete mantenere uno spazio predefinito tra il bordo e il testo, dovete aggiungere il padding, così...

Incorniciare un'immagine

Per incorniciare una immagine, il codice è questo:

Una cornice più particolare:

Titolo

Testo

Codice:

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

• border: 2px = larghezza in pixel della cornice.
• double green = colore della cornice, come per le cornici precedenti, i nomi dei colori vanno inseriti in lingua inglese, o col codice web (color-picker). Volendo, è possibile cambiare il tipo di cornice (double), con quelle degli esempi precedenti.
• color: red = è il colore del Titolo in alto.
• font-family:papyrus = è il font del titolo.
• Titolo = al posto di Titolo, dovete scrivere il titolo che volete dare. E' possibile decidere se deve essere in grassetto, o no, lasciando, o togliendo i tag <b></b> tra cui è scritto (se si lasciano, sarà in grassetto).
• Testo = Il testo nella cornice.

Casella di testo con scrollbar:

Codice:

I valori modificabili sono quelli in rosso, in questo modo..

• height:120px = altezza del box
• width:200px = larghezza del box
• border:2px = spessore della cornice
• solid = stile della cornice (vedi "Tutti gli stili delle cornici")
• green = colore della cornice (nome inglese, o codice "color-picker)"
• font:12px = dimensione del testo
• Arial = carattere del testo
• testo = può essere inserito anche successivamente in modalità editor

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:

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

Cornice responsive con angoli arrotondati:

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:

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.