Come fare i bordi a un DIV in CSS
Come fare un bordo a un DIV. Per fare i bordi a un DIV nel linguaggio CSS è necessario utilizzare gli attributi che consentono di specificare lo spessore, il colore e lo stile del bordo.
Definire lo spessore del bordo
Lo spessore del DIV è definito in pixel tramite l'attributo border-width. Per settare un bordo di 5px è sufficiente scrivere border-width:5px.
Scegliere un colore
Il colore del bordo è, invece, definito dall'attributo border-color seguito dal colore desiderato. Per colorare il bordo di colore grigio scriveremo border-color:#CCCCCC. Nella tabella dei colori il codice #CCCCCC è associato al colore grigio chiaro.
Applicare uno stile alla linea del bordo
Infine, per definire lo stile del bordo è possibile scegliere tra diverse diversi possibilità grafiche tramite l'attributo border-style: linea continua ( solid ), linea punteggiata ( dotted ), linea a trattini ( dashed ), linea doppia ( double ), linea in tre dimensioni ( groove, ridge, inet, outset ).
Un esempio pratico
Facciamo un esempio pratico, proviamo a disegnare un semplice rettangolo DIV utilizzando come bordo una linea continua ( solid ) con tratto fine ( 1 pixel ). Utilizzando il linguaggio CSS possiamo scrivere nel seguente modo:
<html>
<head>
<style type="text/css">
div {
border-style:solid;
border-color:#CCCCCC;
border-width:1px;
}
</style>
</head>
<body>
<DIV>prova div con bordo</DIV>
</body>
</html>
Nel codice abbiamo definito le caratteristiche grafiche del tag DIV come stile ( STYLE ) nella sezione HEAD del documento HTML. In questo modo non è necessario ridefinire le caratteristiche grafiche del tag DIV ogni volta che si utilizza. È importante ricordarsi di separare gli attributi con il simbolo del punto e virgola (;).
Il risultato finale sul browser è il seguente:
Gli attributi border del tag DIV sono veramente molti ed è possibile realizzare diversi effetti grafici combinando in modo diverso i parametri degli attributi. Ad esempio, è possibile aumentare lo spessore o cambiare il colore al bordo, sostituire la linea continua ( solid ) con una linea punteggiata ( dotted ), ecc. Per scoprirli è sufficiente copiare il codice di esempio in questa pagina, provando a sostituire a ciascun attributo un valore diverso.
