Propriedade CSS border-right

A propriedade CSS border-right define a largura, o estilo de linha e a cor da borda direita de um elemento. É uma propriedade shorthand que permite definir três propriedades separadas em uma única declaração:

border-right-width — a espessura da borda,
border-right-style — o estilo de linha (solid, dotted, dashed, etc.),
border-right-color — a cor da linha.

Em vez de escrever três regras, você pode escrever uma:

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

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

Os três valores podem ser especificados em qualquer ordem, e um ou dois deles podem ser omitidos. Quando um valor é omitido, seu padrão é utilizado:

Se o estilo for omitido, a borda não será renderizada — border-right-style tem como padrão none, por isso você deve sempre incluir um estilo para que a borda seja visível.
Se a largura for omitida, o padrão é medium.
Se a cor for omitida, a borda assume o valor de color do elemento; quando esse também não está definido, o fallback é a cor do texto atual (preto por padrão).

Quando usar border-right

Use border-right quando quiser uma linha em apenas um lado de um elemento — por exemplo, um divisor vertical entre uma barra lateral e o conteúdo principal, um acento decorativo em um cartão ou um separador no estilo de sublinhado rotacionado para uma coluna. Se precisar da mesma borda nos quatro lados, use o shorthand border; para os outros lados individuais, veja border-left, border-top e border-bottom.

Valor Padrão	medium none currentColor
Aplicável a	Todos os elementos. Também se aplica a ::first-letter.
Herdado	Não
Animável	Sim. A largura e a cor são animáveis.
Versão	CSS1
Sintaxe DOM	object.style.borderRight = "1px solid black";

Sintaxe

Sintaxe da Propriedade CSS border-right

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

Exemplo da propriedade border-right:

Exemplo da Propriedade 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>

Experimente Você Mesmo »

Resultado

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

A propriedade border-right pode ser aplicada a diferentes elementos e aceita diversos valores de estilo.

Exemplo da propriedade border-right com múltiplos valores:

Exemplo da Propriedade CSS border-right com valores 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>

Experimente Você Mesmo »

Você também pode criar uma caixa com o elemento <div> e definir um background-color para ela, depois adicionar uma borda direita para obter uma caixa estilizada.

Exemplo de uso da propriedade border-right para criar uma caixa estilizada:

Exemplo da Propriedade CSS border-right com a propriedade 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>

Experimente Você Mesmo »

Dicas e armadilhas

Sempre inclua um estilo. Definir apenas border-right: 2px #1c87c9; não mostra nada porque o estilo tem como padrão none. Adicione uma palavra-chave como solid.
A ordem é flexível. border-right: solid 5px red; e border-right: 5px solid red; são equivalentes.
O shorthand redefine as partes omitidas. Escrever border-right: 5px solid; redefine a cor para a cor do texto atual, mesmo que você tenha definido border-right-color anteriormente. Use as propriedades longhands quando quiser alterar apenas uma parte sem afetar as demais.
As bordas somam ao tamanho do layout a menos que box-sizing: border-box esteja definido, pois o content-box padrão adiciona a largura da borda à largura total do elemento.

Valores

O shorthand aceita os valores de suas três propriedades longhands, além das palavras-chave CSS globais:

Valor	Descrição
border-right-width	Define a largura da borda direita de um elemento. O valor padrão é "medium". Valor obrigatório.
border-right-style	Define o estilo de linha da borda direita de um elemento. O valor padrão é "none". Valor obrigatório.
border-right-color	Define a cor da borda direita de um elemento. O valor padrão é a cor atual do texto.
initial	Define a propriedade com seu valor padrão.
inherit	Herda a propriedade de seu elemento pai.

Prática

Quais atributos você pode especificar ao trabalhar com a propriedade border-right em CSS?

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

Propriedades relacionadas

border — define todas as quatro bordas de uma vez.
border-left, border-top, border-bottom — os outros shorthands de lado único.
border-right-width, border-right-style, border-right-color — as propriedades longhands individuais da borda direita.
border-radius — arredonda os cantos onde as bordas se encontram.