Lez.4 - Corso Intermedio Css

Il Bordo degli Elementi: la proprietà border in un foglio di stile Css

Il bordo degli elementi si implementa con la proprietà border

IL bordo è un contorno che viene visualizzato sui lati dell'oggetto e di questo contorno possiamo specificarne: spessore, stile e colore.

Vediamone alcune proprietà con dei valori:
border-width: 5px; in questa maniera diamo una larghezza, quindi uno spessore al bordo di 5px.

border-style: solid; gli diciamo che lo stile del bordo è una linea continua (solid line).

border-color: black; dichiariamo che il colore del bordo deve essere nero.

Ora vediamo nello specifico come si può adoperare la proprietà border-color
border-color: red; se gli assegniamo un solo valore: colora di rosso tutti e quattro i lati dell'elemento.

border-color: red blue; se gli assegniamo due valori: colora di rosso il lato superiore e il lato inferiore, e di blù i due lati laterali.

border-color: red blue green; se gli assegniamo tre valori: colora di rosso il lato superiore, di blù i due lati laterali, e di verde il lato inferiore.

border-color: red blue green black; se gli assegniamo quattro valori: colora i lati in senso orario, in questa maniera: colora di rosso il lato superiore, di blù il lato destro, di verde il lato inferiore, e di nero il lato sinistro.
Ora parliamo della Notazione Semplificata quella più comune ed utilizzata:

border: 10px solid black; con questa notazione semplificata gli dò lo spessore di 10px gli dico che la linea è continua e di colorare tutto il bordo di nero.

La notazione semplificato la possiamo applicare soltanto ad un lato in questa maniera:
border-top: 10px solid black;

Altri valori di border possoo essere:
solid (solido) linea continua

dotted (punteggiata tratteggiata) linea punteggiata

dashed (tratteggiata) linea tratteggiata

double (raddoppiare) linea doppia

groove (scanalatura) effetto 3D con groove l'illuminazione viene dal basso e da destra

ridge (cresta) sempre effetto 3D ma l'illuminazine avviene dall'alto e da sinistra

inset (inserire) effetto 3D incavo

outset (inizio) effetto 3D rilievo

Esempio nel codice:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Border</title>
  <meta charset="utf-8">
  <style type="text/css">
  	div {
	  	  background-color: cyan;
	  	  width: 400px;
	  	  height: 400px;
	  	  border-width: 5px;
	  	  border-style: solid;
	  	  border-color: black;
	  	  border-bottom-color: red;
	   }
  </style>
 </head>
 <body>			    
	<div>
		Contenuto del div
	</div>
		<h1>Border</h1>
 </body>               
</html>