Proprietà CSS border-right

La proprietà CSS border-right imposta la larghezza, lo stile della linea e il colore del bordo destro di un elemento. È una proprietà shorthand che consente di impostare tre proprietà separate in un'unica dichiarazione:

border-right-width — lo spessore del bordo,
border-right-style — lo stile della linea (solid, dotted, dashed, ecc.),
border-right-color — il colore della linea.

Invece di scrivere tre regole, puoi scriverne una sola:

/* shorthand */
border-right: 3px solid #1c87c9;

/* equivalent longhand */
border-right-width: 3px;
border-right-style: solid;
border-right-color: #1c87c9;

I tre valori possono essere specificati in qualsiasi ordine e uno o due di essi possono essere omessi. Quando un valore viene tralasciato, viene utilizzato il suo valore predefinito:

Se lo stile viene omesso, il bordo non viene visualizzato — border-right-style ha come valore predefinito none, ed è per questo che è sempre necessario includere uno stile per vedere un bordo.
Se la larghezza viene omessa, il valore predefinito è medium.
Se il colore viene omesso, il bordo assume il valore color dell'elemento; quando anche questo non è impostato, si ricade sul colore del testo corrente (nero per impostazione predefinita).

Quando usare border-right

Usa border-right quando vuoi una linea su un solo lato di un riquadro — ad esempio, un divisore verticale tra una barra laterale e il contenuto principale, un accento decorativo su una card, o un separatore in stile sottolineatura ruotato in colonna. Se hai bisogno dello stesso bordo su tutti e quattro i lati, usa la shorthand border; per gli altri lati singoli consulta border-left, border-top e border-bottom.

Valore predefinito	medium none currentColor
Si applica a	Tutti gli elementi. Si applica anche a ::first-letter.
Ereditato	No
Animabile	Sì. La larghezza e il colore sono animabili.
Versione	CSS1
Sintassi DOM	object.style.borderRight = "1px solid black";

Sintassi

Sintassi della proprietà CSS border-right

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

Esempio della proprietà border-right:

Esempio della proprietà CSS border-right

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

Provalo tu stesso »

Risultato

![Proprietà CSS border-right](/uploads/media/default/0001/03/4218a03bd607afbe39ebf9286536c0c363499170.png "CSS border-right example" =420x)

La proprietà border-right può essere applicata a elementi diversi e può assumere vari valori di stile.

Esempio della proprietà border-right con più valori:

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

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

Provalo tu stesso »

Puoi anche creare un riquadro con l'elemento <div> e impostare un background-color per il riquadro, quindi aggiungere un bordo destro per ottenere un riquadro elegante.

Esempio di utilizzo della proprietà border-right per creare un riquadro elegante:

Esempio della proprietà CSS border-right con la proprietà solid

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 300px;
        height: 80px;
        text-align: center;
        padding: 20px;
        background: #ccc;
        border-right: 5px solid #000;
      }
    </style>
  </head>
  <body>
    <div>This box has a solid border on the right side.</div>
  </body>
</html>

Provalo tu stesso »

Suggerimenti e avvertenze

Includi sempre uno stile. Impostare solo border-right: 2px #1c87c9; non mostra nulla perché lo stile ha come valore predefinito none. Aggiungi una parola chiave come solid.
L'ordine è flessibile. border-right: solid 5px red; e border-right: 5px solid red; sono equivalenti.
La shorthand azzera le parti omesse. Scrivere border-right: 5px solid; ripristina il colore al colore del testo corrente, anche se avevi impostato border-right-color in precedenza. Usa le proprietà longhand quando vuoi modificare solo una parte senza toccare le altre.
I bordi si aggiungono alle dimensioni del layout a meno che non sia impostato box-sizing: border-box, perché il valore predefinito content-box aggiunge la larghezza del bordo alla larghezza complessiva dell'elemento.

Valori

La shorthand accetta i valori delle sue tre proprietà longhand, più le parole chiave CSS generali:

Valore	Descrizione
border-right-width	Imposta la larghezza del bordo destro di un elemento. Il valore predefinito è "medium". Valore obbligatorio.
border-right-style	Imposta lo stile della linea del bordo destro di un elemento. Il valore predefinito è "none". Valore obbligatorio.
border-right-color	Imposta il colore del bordo destro 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 genitore.

Esercitazione

Pratica

Quali attributi puoi specificare quando lavori con la proprietà border-right in CSS?

border-right-widthborder-right-styleborder-right-colorborder-right-paddingborder-right-margin

Proprietà correlate

border — imposta tutti e quattro i bordi contemporaneamente.
border-left, border-top, border-bottom — le altre shorthand per i lati singoli.
border-right-width, border-right-style, border-right-color — le proprietà longhand individuali per il bordo destro.
border-radius — arrotonda gli angoli dove i bordi si incontrano.