La Propiedad BORDER-TOP

La propiedad border-top en CSS se utiliza para establecer el estilo del borde superior de un elemento HTML.

 

La propiedad border-top en CSS se utiliza para establecer el estilo del borde superior de un elemento HTML. Al igual que border-left, border-right y border-bottom, es una propiedad abreviada que te permite definir el ancho, el estilo y el color del borde superior en una sola declaración.

Sintaxis Básica

La sintaxis básica para usar la propiedad border-top es la siguiente:

CSS
 
selector {
  border-top: <border-width> <border-style> <color>;
}

Donde:

  • <border-width>: Especifica el grosor del borde.
  • <border-style>: Define la apariencia del borde.
  • <color>: Establece el color del borde.

El orden de estos valores no importa. Puedes especificar uno, dos o los tres valores. Si solo se especifican algunos valores, los valores faltantes tomarán sus valores iniciales.

Valores de la Propiedad border-top

A continuación, se detallan los valores que puedes utilizar para cada componente de la propiedad border-top:

1. <border-width> (Ancho del Borde)

Puedes especificar el ancho del borde utilizando:

  • Valores de longitud: En unidades como píxeles (px), ems (em), rems (rem), etc.

    CSS
     
    .borde-ancho-px {
  border-top-width: 3px;
}

.borde-ancho-em {
  border-top-width: 0.2em;
}

  • Palabras clave:

    • thin: Un borde delgado.
    • medium: Un borde de grosor medio (valor predeterminado).
    • thick: Un borde grueso.
    CSS
     
    .borde-ancho-delgado {
  border-top-width: thin;
}

.borde-ancho-medio {
  border-top-width: medium;
}

.borde-ancho-grueso {
  border-top-width: thick;
}

2. <border-style> (Estilo del Borde)

Define la apariencia del borde. Algunos valores comunes incluyen:

  • none: Sin borde.

  • hidden: Similar a none, pero tiene un comportamiento diferente en el colapso de bordes de tablas.

  • dotted: Un borde punteado.

  • dashed: Un borde de guiones.

  • solid: Un borde de línea continua.

  • double: Un borde de doble línea.

  • groove: Un borde con apariencia de surco 3D.

  • ridge: Un borde con apariencia de cresta 3D.

  • inset: Un borde que hace que el contenido parezca estar incrustado.

  • outset: Un borde que hace que el contenido parezca sobresalir.

    CSS
     
    .borde-estilo-solido {
  border-top-style: solid;
}

.borde-estilo-punteado {
  border-top-style: dotted;
}

.borde-estilo-doble {
  border-top-style: double;
}

3. <color> (Color del Borde)

Especifica el color del borde. Puedes usar nombres de colores, valores hexadecimales, valores RGB, RGBA, HSL, HSLA, etc.

CSS
 
.borde-color-rojo {
  border-top-color: red;
}

.borde-color-hex {
  border-top-color: #28a745; /* Un tono de verde */
}

.borde-color-rgba {
  border-top-color: rgba(255, 193, 7, 0.8); /* Un tono de amarillo semi-transparente */
}

Propiedades Individuales Relacionadas

La propiedad border-top es una forma abreviada de establecer las siguientes propiedades individuales:

  • border-top-width: Establece el ancho del borde superior.
  • border-top-style: Establece el estilo del borde superior.
  • border-top-color: Establece el color del borde superior.

Puedes usar border-top para establecer las tres propiedades a la vez, o usar las propiedades individuales para un control más granular.

Ejemplos Prácticos

Aquí tienes algunos ejemplos de cómo usar la propiedad border-top:

Ejemplo 1: Borde superior sólido de 1 píxel de color negro

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 200px;
    height: 100px;
    background-color: #f0f0f0;
    margin: 20px;
    border-top: 1px solid black;
  }
</style>
</head>
<body>

  <div class="elemento">Este es un elemento con un borde superior negro.</div>

</body>
</html>

Ejemplo 2: Borde superior de guiones de grosor medio de color azul

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 250px;
    height: 80px;
    background-color: #e0e0e0;
    margin: 20px;
    border-top: medium dashed blue;
  }
</style>
</head>
<body>

  <div class="elemento">Este elemento tiene un borde superior de guiones azul.</div>

</body>
</html>

Ejemplo 3: Borde superior doble de 3 píxeles de color rojo

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 150px;
    height: 120px;
    background-color: #d0d0d0;
    margin: 20px;
    border-top: 3px double red;
  }
</style>
</head>
<body>

  <div class="elemento">Este elemento tiene un borde superior doble rojo.</div>

</body>
</html>

Ejemplo 4: Usando propiedades individuales

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 200px;
    height: 100px;
    background-color: #f0f0f0;
    margin: 20px;
    border-top-width: thick;
    border-top-style: ridge;
    border-top-color: gray;
  }
</style>
</head>
<body>

  <div class="elemento">Este elemento tiene un borde superior con estilo ridge y color gris.</div>

</body>
</html>

Casos de Uso Comunes

  • Crear líneas horizontales para separar diferentes secciones de contenido.
  • Resaltar la parte superior de un elemento, como encabezados o contenedores.
  • Indicar visualmente la pertenencia a un grupo o categoría.
  • Añadir un toque estético a los elementos de la interfaz de usuario.

Compatibilidad del Navegador

La propiedad border-top es una de las propiedades CSS más fundamentales y tiene una excelente compatibilidad con todos los navegadores modernos y versiones anteriores.

Consideraciones

  • Para que un borde sea visible, debes especificar al menos un border-top-style (que no sea none o hidden) y un border-top-width mayor que cero. Si solo especificas un color sin estilo o ancho, el borde no se mostrará.
  • Si no especificas todos los valores en la propiedad abreviada border-top, los valores faltantes se establecerán en sus valores iniciales. Por ejemplo, si solo especificas border-top: 2px green;, el border-top-style se establecerá en su valor inicial, que es none, y por lo tanto, no verás ningún borde. Debes incluir un estilo como solid, dashed, etc.

Conclusión

La propiedad border-top es una herramienta fundamental en CSS para dar estilo al borde superior de tus elementos HTML. Ya sea que necesites una simple línea divisoria o un borde con un estilo más elaborado, border-top te ofrece la flexibilidad para personalizar la apariencia de tus diseños web. Experimenta con diferentes valores para lograr el efecto visual deseado.