In questo articolo si approfondiscono le proprietà css dei bordi che ci consentono di tracciarlo, assegnarvi un colore , uno stile e le sue dimensioni.
Come al solito lavoreremo con i seguenti due file:
- un documento HTML
- un documento style.css
Andiamo a costruire la nostra pagina html come da esempio sottostante.
<!DOCTYPE html>
<html lang = "it">
<head>
<title> Pagina esempio Ciò Che So </title>
<link rel = "stylesheet" type ="text/css" href="style.css" />
</head>
<body> <h1>Titolo</h1>
<h2>un secondo Titolo </h2>
<h3>Un terzo Titolo </h3>
<h4>Un quarto Titolo </h4>
<h5>Un quinto Titolo </h5>
<h6>Un sesto Titolo</h6>
<p> questo e' un paragrafo di esempio , per testare le proprieta' di CSS </p>
</body>
</html>BORDER-STYLE
Questa proprietà, serve a definire il tipo di bordo che intendiamo visualizzare che può essere:
- DOTTED (puntinato)
- DASHED (quadrettato)
- SOLID (linea)
- DOUBLE (doppia linea)
- GROOVE (bordo scanalato in 3D)
- RIDGE ( bordo increspato in 3D )
- INSET (scavato)
- OUTSET (in rilievo)
A questo punto non ci resta che operare sul file style.css come segue per testare i nostri “stili di bordo”.
STYLE.CSS
h1{border-style: dotted;
}
h2{border-style: dashed;
}
h3{border-style: solid;
}
h4{border-style: double;
}
h5{border-style: groove;
}
h6{border-style: ridge;
}
p{border-style: inset;
}
BORDER-WIDTH
Serve a definire la larghezza dei quattro bordi essa, può essere espressa nelle seguenti modalità
- px, %, cm, em
- parole : thin , medium ,thick
il bordo può assumere fino a 4 valori da specificare nel seguente ordine : bordo superiore , bordo destro,bordo inferiore e bordo sinistro.
Modifichiamo come segue il file style.css per vederlo in pratica.
h1{border-style: dotted;
border-width : 10px;
}
h2{border-style: dashed;
border-width : 0,5cm;
}
h3{border-style: solid;
border-width : medium;
}
h4{border-style: double;
border-width : 10px 3px 5px 20px;
}
BORDER-COLOR
Questa proprietà serve a definire il colore dei 4 bordi, che andrà indicato nella stessa posizione delle dimensioni ovvero: bordo superiore , bordo destro,bordo inferiore e bordo sinistro.
I colori possono essere indicati nelle seguenti modalità: colori predefiniti (red) , o valori RGB (0,0,255), HEX (#FF00FF), RGBA (255,255,255,1),HSL(0, 100%, 50%).
STYLE.CSS
h1{border-style: dotted;
border-width : 10px;
border-color: #FF00FF;
}
h2{border-style: dashed;
border-width : 0,5cm;
border-color: hsl(0,100%,50%);
}
h3{border-style: solid;
border-width : medium;
border-color: yellow;
}
h4{border-style: double;
border-width : 10px 3px 5px 20px;
border-color: red blue gray purple;
}
BORDER-RADIUS
Questa è la proprietà che permette di creare dei bordi arrotondati, si misura in pixel e la vediamo subito con un esempio pratico apportando una piccola modifica a style.css
h1{border-style: dotted;
border-width : 10px;
border-color: #FF00FF;
border-radius: 10px;
}
h2{border-style: dashed;
border-width : 0,5cm;
border-color: hsl(0,100%,50%);
border-radius: 10px;
}
h3{border-style: solid;
border-width : medium;
border-color: yellow;
border-radius: 10px;
}
h4{border-style: double;
border-width : 10px 3px 5px 20px;
border-color: red blue gray purple;
border-radius: 10px;
}
DIFFERENZE TRA I LATI
Per differenziare lo stile dei bordi utilizziamo le seguenti proprietà
- border-top-style:
- border-right-style:
- border-bottom-style:
- border-left-style:
h1{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-width : 10px;
border-color: #FF00FF;
border-radius: 10px;
}
Per lasciare del margine sopra , sotto e lateralmente all’ interno del bordo , passare al tutorial PADDING
