Proprietà CSS border-top-style

La proprietà CSS border-top-style imposta lo stile della linea del bordo superiore di un elemento — se viene disegnato come una linea continua, una linea tratteggiata, una scanalatura 3D e così via.

Accetta una singola parola chiave scelta dallo stesso insieme di valori disponibili per la proprietà abbreviata border-style. La differenza è l'ambito: border-style imposta lo stile di tutti e quattro i lati contemporaneamente, mentre border-top-style riguarda solo il bordo superiore. Le proprietà corrispondenti per gli altri lati sono border-right-style, border-bottom-style e border-left-style.

Quando usarla

Usa border-top-style quando vuoi che un bordo abbia un aspetto diverso dagli altri — ad esempio, un separatore punteggiato sopra un footer, una linea tratteggiata sopra un blocco "leggi di più", o una singola linea continua in cima a una card mentre gli altri lati rimangono senza bordo. Se hai bisogno dello stesso stile su tutti i lati, la proprietà abbreviata border-style è più concisa.

Un bordo viene disegnato solo quando il suo stile è impostato. Per impostazione predefinita border-top-style è none, quindi anche se imposti un colore o uno spessore per il bordo superiore, non verrà mostrato nulla finché non assegni uno stile al bordo superiore. Lo spessore predefinito di un bordo superiore visibile è medium; puoi modificarlo con border-top-width o con la proprietà abbreviata border-width, e impostarne il colore con border-color.

Il rendering non è identico pixel per pixel tra i browser. Ad esempio, Chrome disegna i bordi dotted come piccoli quadrati anziché come punti tondi, e la spaziatura tra punti e trattini è lasciata a ciascun motore.

Informazione

La specifica non definisce la quantità di spazio tra i punti e i trattini.

Informazione

La specifica non definisce come si uniscono gli angoli dei bordi con stili diversi.

Valore predefinito	none
Si applica a	Tutti gli elementi. Si applica anche a ::first-letter.
Ereditato	No
Animabile	No
Versione	CSS1
Sintassi DOM	object.style.borderTopStyle = "dashed";

Sintassi

Sintassi della proprietà CSS border-top-style

border-top-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Esempio della proprietà border-top-style:

Esempio della proprietà CSS border-top-style con i valori dashed e dotted

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2,
      p {
        padding: 15px;
        border: solid #666;
      }
      h2 {
        border-top-style: dashed;
      }
      p {
        border-top-style: dotted;
      }
    </style>
  </head>
  <body>
    <h2>A Heading with dashed border-top-style.</h2>
    <p>A paragraph with dotted border-top-style.</p>
  </body>
</html>

Provalo tu stesso »

Informazione

A seconda del valore di border-color, gli effetti dei valori groove, ridge, inset e outset possono variare.

Risultato

Esempio della proprietà border-top-style con tutti i valori di stile:

Esempio della proprietà CSS border-top-style con i valori hidden, dotted, dashed, solid, double, groove, ridge, inset e outset

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: #1c87c9;
        font-size: 20px;
        text-align: center;
      }
      main div {
        display: flex;
        align-items: center;
        justify-content: center;
        color: black;
        padding-top: 30px;
        padding-bottom: 30px;
        width: 200px;
        height: 100px;
        margin: 15px;
        font-weight: bold;
        background-color: #c9c5c5;
        border: 10px solid;
      }
      .flex-center {
        display: flex;
        justify-content: center;
      }
      /* border-top-style example classes */
      .b1 {
        border-top-style: hidden;
      }
      .b2 {
        border-top-style: dotted;
      }
      .b3 {
        border-top-style: dashed;
      }
      .b4 {
        border-top-style: solid;
      }
      .b5 {
        border-top-style: double;
      }
      .b6 {
        border-top-style: groove;
      }
      .b7 {
        border-top-style: ridge;
      }
      .b8 {
        border-top-style: inset;
      }
      .b9 {
        border-top-style: outset;
      }
    </style>
  </head>
  <body>
    <h1>Border-top-style value examples</h1>
    <main class="flex-center">
      <div class="b1">
        hidden
      </div>
      <div class="b2">
        dotted
      </div>
      <div class="b3">
        dashed
      </div>
    </main>
    <main class="flex-center">
      <div class="b4">
        solid
      </div>
      <div class="b5">
        double
      </div>
      <div class="b6">
        groove
      </div>
    </main>
    <main class="flex-center">
      <div class="b7">
        ridge
      </div>
      <div class="b8">
        inset
      </div>
      <div class="b9">
        outset
      </div>
    </main>
  </body>
</html>

Provalo tu stesso »

Informazione

I valori groove, ridge, inset e outset creano un effetto 3D simulato schiarendo e scurendo il colore di border-color. Su uno sfondo solid o a colore unico possono sembrare quasi piatti — l'effetto è più evidente con un colore di tono medio e un bordo di almeno qualche pixel di spessore.

Valori

Valore	Descrizione	Provalo
none	Indica che non ci sarà alcun bordo. Valore predefinito.	Provalo »
hidden	È uguale a "none" tranne che nella risoluzione dei conflitti di bordo per gli elementi di tabella.	Provalo »
dotted	Definisce un bordo punteggiato.	Provalo »
dashed	Definisce un bordo tratteggiato.	Provalo »
double	Definisce un bordo doppio.	Provalo »
solid	Definisce un bordo continuo.	Provalo »
groove	Definisce un bordo scanalato 3D. Il suo effetto può essere modificato con il valore di border-color.	Provalo »
ridge	Definisce un bordo a cresta 3D. Il suo effetto può essere modificato con il valore di border-color.	Provalo »
inset	Definisce un bordo incassato 3D. Il suo effetto può essere modificato con il valore di border-color.	Provalo »
outset	Definisce un bordo in rilievo 3D. Il suo effetto può essere modificato con il valore di border-color.	Provalo »
initial	Imposta la proprietà al suo valore predefinito.	Provalo »
inherit	Eredita la proprietà dall'elemento genitore.

Proprietà correlate

border-style — imposta lo stile di tutti e quattro i lati contemporaneamente.
border-top — proprietà abbreviata per spessore, stile e colore del bordo superiore.
border-top-width — controlla lo spessore del bordo superiore.
border-color — imposta il colore con cui viene disegnato lo stile.
border-right-style, border-bottom-style, border-left-style — le proprietà corrispondenti per gli altri lati.

Esercitati

Pratica

Quale delle seguenti opzioni sono valori validi per la proprietà 'border-top-style' in CSS?