CSS, il tipo di bordo con border-style

di Michele Costanzo Commenta

CSS bordo border-style
Alcuni giorni fa abbiamo introdotto l’uso dei bordi nei fogli di stile CSS. Come abbiamo visto in quella occasione le proprietà relativa ai bordi riguardano stile (style), colore (color) e spessore (width). In questa guida analizzeremo più in dettaglio le proprietà dei CSS del tipo border-style che intervengono sullo stile (tipologia) del bordo.

La proprietà border-style

Quando vogliamo definire un bordo comune su tutti e quattro lati di un elemento possimo impiegare una proprietà sintetica; nel nostro caso utilizzeremo la proprietà border-style nella forma.

h1 {
  border-style: solid;
}

In questo esempio la proprietà border-style di CSS è applicata all’elemento h1 di HTML ed assume il valore “solid” che corrisponde ad un bordo costruito con una linea continua. La proprietà border-style può assumere una decina di valori differenti a seconda dell’effetto da realizzare:

  • none: nessun bordo (valore predefinito);
  • hidden: bordo nascosto;
  • dotted: bordo con linea punteggiata;
  • dashed: bordo con linea tratteggiata;
  • solid: bordo con linea continua;
  • double: bordo con doppia linea continua;
  • groove: bordo con effetto scavato;
  • ridge: bordo con effetto in rilievo;
  • inset: bordo tridimensionale incavato sul fondo;
  • outset: bordo tridimensionale in rilievo sul fondo;

Bordi fifferenti

Come abbiamo già visto, con i CSS è anche possibile definire bordi differenti per i quattro lati di un elemento. Utilizzeremo a questo scopo le proprietà estese del tipo border-lato-style dove lato indica uno dei quattro lati del bordo: top (alto), bottom (basso), right (destra) e left (sinistra). Un codice di esempio potrebbe quindi avere una forma di questo tipo:

h1 {
border-top-style: solid;
border-bottom-style: double;
border-right-style: dotted;
border-left-style: dashed;
}

Lascia un commento

Il tuo indirizzo email non verrà pubblicato.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>