CSS: propiedad de borde superior

Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.

CSS: propiedad de borde superior

Este tutorial de CSS explica cómo usar una propiedad de CSS llamada borde superior Con sintaxis y ejemplos.

describir

La propiedad CSS border-top define el ancho, el estilo de línea y el color del borde superior del cuadro. Es una propiedad abreviada para configurar las propiedades CSS border-top-width, border-top-style y border-top-color.

sintaxis

La sintaxis de la propiedad CSS del borde superior es:

border-top: border-top-width border-top-style border-top-color;

parámetro o parámetro

border-top-width es el ancho del borde superior del cuadro, que puede ser uno de los siguientes:
(Si no se proporciona el ancho superior del borde, el valor predeterminado es medio)

valor describir
estable valor fijo en px, em, …
div { borde superior: 2px; }
finamente Ancho superior del borde delgado, puede ser 1px o 2px dependiendo del navegador
div {borde superior: delgado;}
Moderar Ancho superior del borde medio, puede ser 3px o 4px dependiendo del navegador
div { borde superior: medio; }
Grueso Ancho superior del borde grueso, puede ser 5px o 6px según el navegador
div {borde superior: grueso;}

border-top-style es el estilo de línea para el borde superior del cuadro, que puede ser uno de los siguientes:
(el valor predeterminado es ninguno si no se proporciona el estilo superior del borde)

valor describir
no cualquiera parte superior sin bordes (este es el valor predeterminado)
div { borde superior: ninguno; }
duro simple, recto, sólido
div {borde superior: sólido;}
embellecido serie de puntos
div {borde superior: punteado;}
linea punteada Serie de guiones
div { borde superior: discontinuo; }
doble Las dos líneas se suman a la cantidad de píxeles definidos por el ancho superior del borde
div { borde superior: doble; }
ranura efecto de grabado
div { borde superior: surco; }
cresta Aspecto 3D, la parte superior del borde parece “salir” (frente a la ranura)
div {borde superior: cresta;}
ilustración Apariencia incrustada
div { borde superior: inserción; }
al principio Apariencia en relieve (a diferencia de la ilustración)
div { borde superior: inicio; }
oculto el borde está oculto
div {borde superior: oculto;}
heredar El elemento heredará el estilo superior del borde de su elemento principal
div { borde superior: heredar; }

border-top-color es el color del borde superior del cuadro, que puede ser uno de los siguientes:

valor describir
#RRGGBB representación hexadecimal del color superior del borde
div {borde superior: #FF0000; }
RGB() Representación RGB del color superior del borde
div {borde superior: rgb(255, 0, 0); }
nombre Nombre del color superior del borde (es decir, rojo, azul, negro, blanco)
div { borde superior: rojo; }
transparente No muestre los bordes pero aún así ocupe espacio en la página
div { borde superior: transparente; }
heredar El elemento heredará el color superior del borde de su elemento principal
div { borde superior: heredar; }

notas

  • Al usar la propiedad border-top, puede proporcionar uno o todos los valores (valores border-top-width, border-top-style y border-top-width), y puede proporcionarlos en cualquier orden.
  • Debe proporcionar un valor para el estilo superior del borde que muestra el borde superior.
  • Consulte también las propiedades border-top-color, border-top-style y border-top-width.
  • ¿Necesita convertir sus valores de color a una representación diferente? Pruebe esta herramienta en línea para convertir sus valores de color entre hexadecimal y RGB.

Compatibilidad del navegador

La propiedad CSS border-top tiene soporte básico para los siguientes navegadores:

  • Aleación de cromo
  • androide
  • Firefox (Geco)
  • Firefox móvil (Geco)
  • Navegador de Internet (IE)
  • es decir, móvil
  • ópera
  • Ópera Móvil
  • Safari (WebKit)
  • Safari para móvil

ejemplo

Discutiremos la propiedad border-top a continuación, explorando ejemplos de cómo usarla en CSS.

Por ejemplo:

div { border-top: solid; }

En este ejemplo de la parte superior del borde CSS, configuramos el estilo de línea del borde superior como sólido. Debe diseñar el borde superior; de lo contrario, el borde superior no aparecerá.

A continuación, veremos un ejemplo de borde superior de CSS en el que proporcionamos valores de ancho de borde superior, estilo de borde superior y color de borde superior.

div { border-top: 2px solid red; }

En este ejemplo de borde superior de CSS, establecemos el ancho del borde superior en 2px, el estilo del borde superior en sólido y el color del borde superior en rojo.

Podemos reescribir este ejemplo usando valores hexadecimales rojos de la siguiente manera:

div { border-top: 2px solid #FF0000; }

O podríamos reescribir este ejemplo con valores rojos rgb() de la siguiente manera:

div { border-top: 2px solid rgb(255,0,0); }