Propriedade CSS border-top

A propriedade CSS border-top define a largura, o estilo e a cor da borda superior de um elemento em uma única declaração. É um atalho que combina três propriedades individuais: border-top-width, border-top-style e border-top-color.

Esta página aborda a sintaxe da propriedade, o significado de cada valor, como os valores omitidos são resolvidos e exemplos práticos que você pode executar.

Quando utilizá-la

Use border-top quando quiser uma borda apenas na borda superior de um elemento — por exemplo, um divisor acima de um rodapé, uma linha de destaque no topo de um cartão ou uma régua entre itens de lista empilhados. Se precisar da mesma borda nos quatro lados, use o atalho border; para controle total por lado, use border-top, border-right, border-bottom e border-left em conjunto.

Especificando os valores

Os três valores podem ser fornecidos em qualquer ordem e você pode omitir um ou dois deles. Qualquer valor omitido retorna ao seu valor inicial:

O estilo é obrigatório para que a borda apareça. O valor inicial de border-top-style é none, portanto, se você omitir o estilo, nenhuma borda será renderizada — mesmo que defina uma largura e uma cor.
Se você omitir a cor, a borda usará o valor color do elemento (currentColor). Quando color não está definido, é herdado ou assume o padrão preto.
Se você omitir a largura, ela retornará ao valor medium (aproximadamente 3px na maioria dos navegadores).

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

Sintaxe

Sintaxe da propriedade CSS border-top

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

Exemplo da propriedade border-top:

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

Experimente Você Mesmo »

Resultado

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

Exemplo da propriedade border-top aplicada a diferentes elementos:

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

Experimente Você Mesmo »

Você pode criar uma caixa com o elemento <div> e definir uma background-color para a sua caixa e definir a borda superior.

Exemplo de uso da propriedade border-top para criar uma caixa com borda ridge:

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

Experimente Você Mesmo »

Problemas comuns

Nada aparece? O erro mais frequente é omitir o estilo. border-top: 2px #1c87c9; não renderiza nada porque o estilo assume o padrão none. Adicione uma palavra-chave de estilo como solid: border-top: 2px solid #1c87c9;.
As bordas aumentam o tamanho do elemento. Uma borda superior aumenta a altura renderizada, a menos que box-sizing seja definido como border-box. Lembre-se disso ao alinhar elementos com e sem borda.
Palavras-chave de comprimento para a largura. Além de comprimentos explícitos como 3px, a largura aceita as palavras-chave thin, medium e thick. Seus valores exatos em pixels são definidos pelo navegador.

Valores

border-top em si não aceita valores de palavras-chave nomeadas diretamente para as partes da borda — em vez disso, aceita os valores de suas três propriedades individuais, além das palavras-chave globais initial e inherit:

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

Prática

Qual é a sintaxe correta para definir a propriedade CSS 'border-top'?

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