HTML.net

Lezione 11: Bordi

I bordi possono essere usati per molte cose, per esempio come elemento decoratico o per sottolineare una separazione fra due oggetti. I CSS ti forniscono opzioni infinite nell'utilizzo dei bordi nelle tue pagine.

• border-width
• border-color
• border-style
• esempi di definizioni di bordi
• border

Spessore dei bordi [border-width]

Lo spessore dei bordi viene definito con la proprietà border-width, che può avere valore thin (sottile), medium (medio), e thick (spesso), o un valore numerico indicato in pixel. La figura sotto illustra come:

Colore dei bordi [border-color]

La proprietà border-color definisce il colore del bordo. I valori sono i normali valori per i colori, come per esempio "#123456", "rgb(123,123,123)" o "yellow".

Tipi di bordi [border-style]

E' possibile scegliere fra diversi tipi di bordi. Sotto sono mostrati 8 diversi tipi di bordi così come vengono interpretati da Internet Explorer 5.5. Tutti gli esempi sono mostrati con colore "gold" e spessore "thick", ma possono essere chiaramente mostrati con altri colori e altri spessori.

Quando non vuoi nessun bordo puoi usare i valori none o hidden.

Esempi di definizione di bordi

Le tr proprietà descritte sopra possono essere messe insieme in ogni elemento e produrre pertanto bordi diversi. Per mostrare questo vedremo un documento dove vengono abbiamo definito bordi diversi per <h1>, <h2>, <ul> e <p>. Il risultato potrebbe non essere così gradevole ma mostra bene alcune delle molte possibilità:

h1 {
	border-width: thick;
	border-style: dotted;
	border-color: gold;
}

h2 {
	border-width: 20px;
	border-style: outset;
	border-color: red;
}

p {
	border-width: 1px;
	border-style: dashed;
	border-color: blue;
}

ul {
	border-width: thin;
	border-style: solid;
	border-color: orange;
}

• Visualizza l'esempio

E' possile definire anche delle proprietà speciali per i bordi top-, bottom-, right- o left-. L'esempio sotto mostra come:

h1 {
	border-top-width: thick;
	border-top-style: solid;
	border-top-color: red;

	border-bottom-width: thick;
	border-bottom-style: solid;
	border-bottom-color: blue;

	border-right-width: thick;
	border-right-style: solid;
	border-right-color: green;

	border-left-width: thick;
	border-left-style: solid;
	border-left-color: orange;
}

• Visualizza l'esempio

Raggruppamento [border]

Come abbiamo fatto anche per altri elementi, è possibile raggruppare in una molte proprietà usando border. Vediamo come fare con un esempio:

p {
	border-width: 1px;
	border-style: solid;
	border-color: blue;
}

Può essere raggruppato in:

p {
	border: 1px solid blue;
}

Riepilogo

In questa lezione hai imparato le infinite opzioni che i CSS ti offrono quando utilizzi i bordi nelle pagine.

Nella prossima lezione vedremo come definire le dimensioni del modello box - height e width.

Search