Propriedade CSS border-right-width

A propriedade CSS border-right-width define a largura (espessura) apenas da borda direita de um elemento. Ela controla apenas um lado, o que a torna útil quando você deseja uma borda assimétrica — por exemplo, uma linha de destaque espessa à direita de uma barra lateral ou de uma citação, enquanto os outros três lados permanecem finos ou ausentes.

Você também pode definir a largura da borda direita por meio das propriedades abreviadas border ou border-width. Use border-right-width quando precisar especificamente substituir ou ajustar um lado sem afetar os demais.

Por que um estilo de borda é necessário primeiro

Uma borda não tem largura visível sem que também tenha um estilo. Se você definir border-right-width mas deixar o estilo da borda direita com o valor padrão (none), nada será renderizado — uma borda none colapsa para zero independentemente da largura especificada. Portanto, sempre declare um estilo primeiro, usando border-right-style, border-style ou a abreviação border. Para definir também a cor, consulte 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;
}

Informação

A especificação não define a espessura exata de cada palavra-chave. No entanto, elas sempre seguem esta ordem: thin ≤ medium ≤ thick.

Informação

A especificação não define como as bordas de diferentes larguras e estilos se conectam nos cantos.

Valor inicial	medium
Aplicável a	Todos os elementos. Também se aplica a ::first-letter.
Herdado	Não
Animável	Sim. A largura da borda é animável.
Versão	CSS1
Sintaxe DOM	object.style.borderRightWidth = "5px";

Sintaxe

Sintaxe da propriedade CSS border-right-width

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

Exemplo da propriedade border-right-width:

Exemplo da propriedade CSS border-right-width com o valor 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>

Experimente Você Mesmo »

Exemplo da propriedade border-right-width com todos os valores:

Exemplo da propriedade CSS border-right-width com os valores 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>

Experimente Você Mesmo »

Resultado

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

Valores

Valor	Descrição	Experimente
medium	Define uma borda direita média. É o valor padrão desta propriedade.	Experimente »
thin	Define uma borda direita fina. Cabe ao agente de usuário determinar a largura exata.	Experimente »
thick	Define uma borda direita espessa. Cabe ao agente de usuário determinar a largura exata.	Experimente »
length	Define a espessura da borda direita como um comprimento explícito. Por exemplo, 10px, 5em, 8pt, etc. Valores negativos não são permitidos.	Experimente »
initial	Define a propriedade com seu valor padrão.	Experimente »
inherit	Herda a propriedade do elemento pai.

Propriedades relacionadas

border-right-style — obrigatório antes que a largura seja visível.
border-right-color — define a cor da borda direita.
border-right — abreviação para largura, estilo e cor da borda direita.
border-width — define a largura dos quatro lados de uma vez.
border-left-width, border-top-width, border-bottom-width — as outras propriedades de largura por lado.

Prática

O que a propriedade CSS 'border-right-width' especifica?

Especifica a cor da borda direita.Especifica a largura da borda direita.Especifica o estilo da borda direita.Especifica o tamanho da margem direita.