In CSS esistono due tipi di cornici diversi con border e outline. Mentre border indica sempre una cornice rettangolare, le cornici outline introdotte in CSS2 sono pensate per aree non rettangolari. E c'è anche un'altra differenza: con outline il contorno è posto al di fuori della cornice, permettendo quindi a un elemento di avere sia una cornice con border che un contorno con outline.
Le definizioni di cornice presentate in questo tutorial sono particolarmente interessanti per elementi che costituiscono un proprio paragrafo. In generale, possono essere applicate anche ad altri elementi.
Definire una cornice
Con border è possibile definire l'aspetto dell'intera cornice intorno a un elemento.
Nel caso della proprietà border, si tratta di un riassunto dei seguenti valori, su cui si discuterà dettagliatamente in seguito:
• border-color
• border-style
• border-width
I valori delle singole proprietà sono separati da spazi vuoti. L'ordine in cui si specificano le proprietà non ha importanza. Inoltre, per border esistono anche quattro sottoproprietà che consentono di specificare il colore della cornice, lo spessore e il tipo di cornice per i singoli lati dell'elemento.
• border-top – cornice superiore
• border-right – cornice destra
• border-bottom – cornice inferiore
• border-left – cornice sinistra
L'esempio seguente mostra l'utilizzo di border. Con questa definizione viene generata una cornice nera, larga tre punti e tratteggiata.
<p style="border:3pt solid #000000;"> Benvenuti </p>
Il risultato nel browser:
Il colore della cornice
Con border-color viene determinato il colore della cornice. I seguenti valori sono ammessi:
• trasparente – cornice trasparente
• Valore del colore
Se viene fornito un solo valore, questo è valido per tutti i lati della cornice. Per definire colori diversi per i singoli lati, si forniscono più valori, separati da spazi vuoti, per ciascun lato.
• Due valori – il primo per la parte superiore e inferiore, il secondo per i lati sinistro e destro del colore della cornice.
• Tre valori – il primo per la parte superiore, il secondo per i lati sinistro e destro, il terzo per la parte inferiore del colore della cornice.
• Quattro valori – primo valore per la parte superiore, secondo per il lato destro, terzo per la parte inferiore e quarto per il lato sinistro del colore della cornice.
Allo stesso modo, possono essere utilizzate le seguenti sottoproprietà di border:
• border-top-color – colore della cornice superiore
• border-right-color – colore della cornice destra
• border-bottom-color – colore della cornice inferiore
• border-left-color – colore della cornice sinistra
Un esempio:
<p style="border-color: #ffff00; border-width: 3px; border-style: solid; padding: 2px"> PSD-Tutorials.de </p>
E qui il risultato nel browser:
Il tipo di linea
Con border-style è possibile definire il tipo di linea della cornice.
Di seguito troverete un elenco delle possibili varianti di cornice:
• none – cornice invisibile
• punteggiato – puntinato
• tratteggiato – tratteggiato
• continuo – continuo
• doppio – doppio continuo
• scolpito – linea 3D
• crestato – linea 3D
• incastrato – linea 3D
• esterno – linea 3D
Ecco un esempio di come appaiono i diversi tipi di cornice:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>
<body>
<p class="none">none</p>
<p class="dotted">dotted</p>
<p class="dashed">dashed</p>
<p class="solid">solid</p>
<p class="double">double</p>
<p class="groove">groove</p>
<p class="ridge">ridge</p>
<p class="inset">inset</p>
<p class="outset">outset</p>
<p class="hidden">hidden</p>
</body>
</html>Il risultato nel browser:
Se si specifica un solo valore, questo si applica a tutti i lati della cornice. Per definire tipi di cornice diversi per i singoli lati, si elencano più valori, separati da spazi vuoti.
• Due valori – il primo per la parte superiore e inferiore, il secondo per i lati sinistro e destro del tipo di cornice.
• Tre valori – il primo per la parte superiore, il secondo per i lati sinistro e destro, il terzo per la parte inferiore del tipo di cornice.
• Quattro valori – primo valore per la parte superiore, secondo per il lato destro, terzo per la parte inferiore e quarto per il lato sinistro del tipo di cornice.
Allo stesso modo, possono essere utilizzate anche le seguenti sottoproprietà di border:
• border-top-style – tipo di cornice superiore
• border-right-style – tipo di cornice destra
• border-bottom-style – tipo di cornice inferiore
• border-left-style – tipo di cornice sinistra
Anche qui un esempio:
<p style="border-bottom-style: dashed;"> Cornice tratteggiata </p>
Ecco come appare nel browser:
Definire la larghezza del bordo
Attraverso border-width viene determinata la larghezza del bordo.
• Indicazione della lunghezza
• thin – bordo sottile
• medium – bordo di media larghezza
• thick – bordo spesso
Se viene fornito un solo valore, questo vale per tutti i lati dell'elemento. Per specificare spessori diversi per i singoli lati, ci sono due opzioni. Nella prima variante si scrivono diversi valori separati da spazi vuoti.
• Due valori – il primo valore per la larghezza del bordo superiore e inferiore, il secondo per il lato sinistro e destro.
• Tre valori – il primo valore per il bordo superiore, il secondo per il lato sinistro e destro, il terzo per il bordo inferiore.
• Quattro valori – primo valore per il bordo superiore, secondo per il lato destro, terzo per il bordo inferiore, quarto per il lato sinistro.
Inoltre è possibile utilizzare le seguenti sottoproprietà di border:
• border-top-width – spessore bordo superiore
• border-right-width – spessore bordo destro
• border-bottom-width – spessore bordo inferiore
• border-left-width – spessore bordo sinistro
Un esempio:
<p style="border-width:2px;border-style: dotted;"> Benvenuti </p>
Il colore del bordo per l'outline
Con la proprietà outline-color viene definito il colore del bordo. La specifica è identica a border-color.
• invert – il colore viene invertito. Questo colore è generato dall'inversione di tutti i bit di un valore colore esadecimale.
• Specifica del colore
Un esempio:
<p style="outline-width: medium; outline-style: solid; outline-color: blue;"> PSD-Tutorials.de </p>
Ecco come appare nel browser:
Il tipo di bordo per l'outline
La specifica outline-style determina il tipo di contorno. Sono ammessi gli stessi valori di border-style.
• none – bordo invisibile
• dotted – a puntini
• dashed – tratteggiato
• solid – continuo
• double – doppio
• groove – linea 3D
• ridge – linea 3D
• inset – linea 3D
• outset – linea 3D
Un esempio:
<p style="outline-style:solid;outline-width:2px; outline-color:red;"> PSD-Tutorials.de </p>
Lo spessore del bordo per l'outline
La specifica outline-width è identica a border-width. Anche qui viene definita lo spessore del bordo. Per creare una linea di contorno visibile, si combina sempre outline-width con outline-style.
• medium – bordo di media larghezza
• thin – bordo sottile
• thick – bordo spesso
• Indicazione della lunghezza – determina lo spessore del bordo
Un esempio:
<p style="outline-width: thin;outline-style: solid; outline-color: red;">
Benvenuti
</p>
E come per il bordo, esiste una proprietà generale anche per i bordi di outline.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p {
border:red solid thick;
outline:green dotted thick;
}
</style>
</head>
<body>
<p>Benvenuti su PSD-Tutorials.de!</p>
</body>
</html>
Questo riassume le seguenti proprietà:
• outline-width
• outline-style
• outline-color
Il principio è quindi identico a quello della proprietà generale di border.
