CSS : BORDI - Ciò Che So

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;
}