CSS : BORDI

Ottobre 21, 2019 /

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:

  1. un documento HTML
  2. 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

Articoli correlati