Proprietà CSS border-top

La proprietà CSS border-top imposta la larghezza, lo stile e il colore del bordo superiore di un elemento in una singola dichiarazione. È una proprietà shorthand che combina tre proprietà longhand: border-top-width, border-top-style e border-top-color.

Questa pagina tratta la sintassi della proprietà, il significato di ciascun valore, come vengono risolti i valori omessi e alcuni esempi pratici eseguibili.

Quando utilizzarla

Usa border-top quando vuoi un bordo solo sul lato superiore di un elemento — ad esempio, un separatore sopra un footer, una linea decorativa in cima a una card, o una riga tra elementi di lista sovrapposti. Se hai bisogno dello stesso bordo su tutti e quattro i lati, usa invece la proprietà shorthand border; per un controllo completo lato per lato, usa insieme border-top, border-right, border-bottom e border-left.

Specificare i valori

I tre valori possono essere forniti in qualsiasi ordine e puoi omettere uno o due di essi. Qualsiasi valore omesso torna al suo valore iniziale:

Lo stile è necessario per visualizzare un bordo. Il valore iniziale di border-top-style è none, quindi se ometti lo stile, non viene visualizzato alcun bordo — anche se hai impostato una larghezza e un colore.
Se ometti il colore, il bordo usa il valore color dell'elemento (currentColor). Quando color non è impostato, viene ereditato o assume il valore predefinito nero.
Se ometti la larghezza, torna al valore medium (circa 3px nella maggior parte dei browser).

Valore iniziale	medium none currentColor
Si applica a	Tutti gli elementi. Si applica anche a ::first-letter.
Ereditato	No
Animabile	Sì. Il colore e la larghezza del bordo sono animabili.
Versione	CSS1
Sintassi DOM	object.style.borderTop = "1px solid black";

Sintassi

Sintassi della proprietà CSS border-top

border-top: border-width border-style border-color | initial | inherit;

Esempio della proprietà border-top:

Esempio della proprietà CSS border-top con valore solid

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border-top: 3px solid #1c87c9;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-top example</h2>
    <div> This is a simple example for the border-top property.</div>
  </body>
</html>

Provalo tu stesso »

Risultato

![Proprietà CSS border-top](/uploads/media/default/0001/03/2f035228f6c0a9e922d16e119bd24dba1d27241b.png "CSS border-top Property" =420x)

Esempio della proprietà border-top applicata a diversi elementi:

Esempio della proprietà CSS border-top con valori dotted, solid e double

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1,
      p,
      div {
        padding: 10px;
      }
      h1 {
        border-top: 5px solid #8ebf42;
      }
      p {
        border-top: 4px dotted #1c87c9;
      }
      div {
        border-top: thick double #666;
      }
    </style>
  </head>
  <body>
    <h1>A heading with a solid green top border</h1>
    <p>A heading with a dotted blue top border.</p>
    <div>A div element with a thick double top border.</div>
  </body>
</html>

Provalo tu stesso »

Puoi creare un riquadro con l'elemento <div> e impostare un background-color per il riquadro, definendo poi il bordo superiore.

Esempio di utilizzo della proprietà border-top per creare un riquadro con bordo ridge:

Esempio della proprietà CSS border-top con valore ridge

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border-top: 20px ridge #8ebf42;
        background-color: #ccc;
        height: 100px;
        width: 200px;
        font-weight: bold;
        text-align: center;
        padding: 3px;
      }
    </style>
  </head>
  <body>
    <div>
      <p>This box has a ridge border on the top.</p>
    </div>
  </body>
</html>

Provalo tu stesso »

Errori comuni

Non appare nulla? L'errore più frequente è omettere lo stile. border-top: 2px #1c87c9; non visualizza nulla perché lo stile ha come valore predefinito none. Aggiungi una parola chiave di stile come solid: border-top: 2px solid #1c87c9;.
I bordi si aggiungono alle dimensioni dell'elemento. Un bordo superiore aumenta l'altezza renderizzata a meno che box-sizing non sia impostato su border-box. Tienilo presente quando allinei elementi con e senza bordo.
Parole chiave di lunghezza per la larghezza. Oltre alle lunghezze esplicite come 3px, la larghezza accetta le parole chiave thin, medium e thick. I loro valori esatti in pixel dipendono dal browser.

Valori

border-top di per sé non accetta direttamente parole chiave con nome per le parti del bordo — accetta invece i valori delle sue tre proprietà longhand, più le parole chiave globali initial e inherit:

Valore	Descrizione
border-top-width	Imposta la larghezza del bordo superiore di un elemento. Il valore predefinito è "medium". Valore obbligatorio.
border-top-style	Imposta lo stile della linea del bordo superiore di un elemento. Il valore predefinito è "none". Valore obbligatorio.
border-top-color	Imposta il colore del bordo superiore di un elemento. Il valore predefinito è il colore corrente del testo.
initial	Imposta la proprietà al suo valore predefinito.
inherit	Eredita la proprietà dall'elemento padre.

Esercitazione

Pratica

Qual è la sintassi corretta per impostare la proprietà CSS 'border-top'?

border-top: 10px solid red;border.top: 10px solid red;borderTop: 10px solid red;border-top = 10px solid red;