Proprietà CSS border-right-width

La proprietà CSS border-right-width imposta la larghezza (spessore) del bordo destro di un elemento. Controlla solo un lato, il che la rende utile quando si desidera un bordo asimmetrico — ad esempio, una linea di accento spessa sul lato destro di una barra laterale o di una citazione, mentre gli altri tre lati rimangono sottili o assenti.

È possibile impostare la larghezza del bordo destro anche tramite le proprietà shorthand border o border-width. Utilizza border-right-width quando hai bisogno di sovrascrivere o regolare un solo lato senza modificare gli altri.

Perché è necessario prima uno stile di bordo

Un bordo non ha larghezza visibile a meno che non abbia anche uno stile. Se imposti border-right-width ma lasci lo stile del bordo destro al valore predefinito (none), non viene visualizzato nulla — un bordo none si riduce a zero indipendentemente dalla larghezza specificata. Dichiara sempre prima uno stile, utilizzando border-right-style, border-style, o la shorthand border. Per impostare anche il colore, consulta border-right-color.

/* Width alone does nothing — there is no style to give it a width. */
.broken {
  border-right-width: 8px;
}

/* Style + width — now the 8px right border is visible. */
.works {
  border-right-style: solid;
  border-right-width: 8px;
}

Informazione

La specifica non definisce lo spessore esatto di ciascuna parola chiave. Tuttavia, seguono sempre quest'ordine: thin ≤ medium ≤ thick.

Informazione

La specifica non definisce come i bordi di larghezza e stile diversi si collegano negli angoli.

Valore iniziale	medium
Si applica a	Tutti gli elementi. Si applica anche a ::first-letter.
Ereditato	No
Animabile	Sì. La larghezza del bordo è animabile.
Versione	CSS1
Sintassi DOM	object.style.borderRightWidth = "5px";

Sintassi

Sintassi della proprietà CSS border-right-width

border-right-width: medium | thin | thick | length | initial | inherit;

Esempio della proprietà border-right-width:

Esempio della proprietà CSS border-right-width con il valore thick

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        padding: 8px;
        width: 50%;
        border-style: dotted;
        border-right-width: thick;
      }
    </style>
  </head>
  <body>
    <h2>Border-right-width example</h2>
    <p>As you can see the width of the right border is set to thick.</p>
  </body>
</html>

Provalo tu stesso »

Esempio della proprietà border-right-width con tutti i valori:

Esempio della proprietà CSS border-right-width con i valori medium, thin, thick, px, initial e inherit

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: #ccc;
        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;
        border: solid;
      }
      .flex-center {
        display: flex;
        justify-content: center;
      }
      /* border-right-width example classes */
      .b1 {
        border-right-width: medium;
      }
      .b2 {
        border-right-width: thin;
      }
      .b3 {
        border-right-width: thick;
      }
      .b4 {
        border-right-width: 10px;
      }
      .b5 {
        border-right-width: initial;
      }
      .b6 {
        border-right-width: inherit;
      }
    </style>
  </head>
  <body>
    <h1>Border-right-width value examples</h1>
    <main class="flex-center">
      <div class="b1">
        medium
      </div>
      <div class="b2">
        thin
      </div>
      <div class="b3">
        thick
      </div>
    </main>
    <main class="flex-center">
      <div class="b4">
        10px length
      </div>
      <div class="b5">
        initial
      </div>
      <div class="b6">
        inherit
      </div>
    </main>
  </body>
</html>

Provalo tu stesso »

Risultato

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

Valori

Valore	Descrizione	Provalo
medium	Definisce un bordo destro medio. È il valore predefinito di questa proprietà.	Provalo »
thin	Definisce un bordo destro sottile. Spetta allo user agent determinare la larghezza esatta.	Provalo »
thick	Definisce un bordo destro spesso. Spetta allo user agent determinare la larghezza esatta.	Provalo »
length	Definisce lo spessore del bordo destro come lunghezza esplicita. Ad esempio, 10px, 5em, 8pt, ecc. I valori negativi non sono consentiti.	Provalo »
initial	Imposta la proprietà al suo valore predefinito.	Provalo »
inherit	Eredita la proprietà dall'elemento genitore.

Proprietà correlate

border-right-style — necessaria prima che la larghezza sia visibile.
border-right-color — imposta il colore del bordo destro.
border-right — shorthand per larghezza, stile e colore del bordo destro.
border-width — imposta la larghezza di tutti e quattro i lati contemporaneamente.
border-left-width, border-top-width, border-bottom-width — le altre proprietà di larghezza per lato singolo.

Esercizio

Pratica

Cosa specifica la proprietà CSS 'border-right-width'?

Specifica il colore del bordo destro.Specifica la larghezza del bordo destro.Specifica lo stile del bordo destro.Specifica la dimensione del margine destro.