Propiedad CSS border-top

La propiedad CSS border-top establece el ancho, el estilo y el color del borde superior de un elemento en una sola declaración. Es una propiedad abreviada que combina tres propiedades individuales: border-top-width, border-top-style y border-top-color.

Esta página cubre la sintaxis de la propiedad, el significado de cada valor, cómo se resuelven los valores omitidos y ejemplos prácticos que puedes ejecutar.

Cuándo usarla

Utiliza border-top cuando quieras un borde únicamente en el borde superior de un elemento — por ejemplo, un divisor encima de un pie de página, una línea de acento superior en una tarjeta o una regla entre elementos de lista apilados. Si necesitas el mismo borde en los cuatro lados, usa el atajo border; para un control total por lado, usa border-top, border-right, border-bottom y border-left juntos.

Especificación de los valores

Los tres valores se pueden indicar en cualquier orden y puedes omitir uno o dos de ellos. Cualquier valor que omitas vuelve a su valor inicial:

El estilo es necesario para ver un borde. El valor inicial de border-top-style es none, por lo que si omites el estilo no se renderiza ningún borde, incluso si estableces un ancho y un color.
Si omites el color, el borde usa el valor color del elemento (currentColor). Cuando color no está definido, se hereda o toma el valor negro por defecto.
Si omites el ancho, este vuelve a medium (aproximadamente 3px en la mayoría de los navegadores).

Valor inicial	medium none currentColor
Se aplica a	Todos los elementos. También se aplica a ::first-letter.
Heredada	No
Animable	Sí. El color y el ancho del borde son animables.
Versión	CSS1
Sintaxis DOM	object.style.borderTop = "1px solid black";

Sintaxis

Sintaxis de la propiedad CSS border-top

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

Ejemplo de la propiedad border-top:

Ejemplo de la propiedad CSS border-top con el 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>

Pruébalo tú mismo »

Resultado

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

Ejemplo de la propiedad border-top aplicada a distintos elementos:

Ejemplo de la propiedad CSS border-top con los valores dotted, solid y 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>

Pruébalo tú mismo »

Puedes crear un cuadro con el elemento <div> y establecer un background-color para tu cuadro y definir el borde superior.

Ejemplo del uso de la propiedad border-top para crear un cuadro con borde ridge:

Ejemplo de la propiedad CSS border-top con el 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>

Pruébalo tú mismo »

Errores comunes

¿No aparece nada? El error más frecuente es omitir el estilo. border-top: 2px #1c87c9; no renderiza nada porque el estilo toma el valor por defecto none. Añade una palabra clave de estilo como solid: border-top: 2px solid #1c87c9;.
Los bordes se suman al tamaño del elemento. Un borde superior incrementa la altura renderizada a menos que box-sizing esté establecido en border-box. Tenlo en cuenta al alinear elementos con y sin borde.
Palabras clave de longitud para el ancho. Además de longitudes explícitas como 3px, el ancho acepta las palabras clave thin, medium y thick. Sus valores exactos en píxeles los define cada navegador.

Valores

border-top en sí mismo no acepta palabras clave con nombre para las partes del borde directamente — en su lugar acepta los valores de sus tres propiedades individuales, más las palabras clave globales initial e inherit:

Valor	Descripción
border-top-width	Establece el ancho del borde superior de un elemento. El valor por defecto es "medium". Valor obligatorio.
border-top-style	Establece el estilo de línea del borde superior de un elemento. El valor por defecto es "none". Valor obligatorio.
border-top-color	Establece el color del borde superior de un elemento. El valor por defecto es el color actual del texto.
initial	Establece la propiedad en su valor por defecto.
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Cuál es la sintaxis correcta para establecer la propiedad CSS 'border-top'?

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