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)

valordescribir
establevalor fijo en px, em, …
div { borde superior: 2px; }
finamenteAncho superior del borde delgado, puede ser 1px o 2px dependiendo del navegador
div {borde superior: delgado;}
ModerarAncho superior del borde medio, puede ser 3px o 4px dependiendo del navegador
div { borde superior: medio; }
GruesoAncho 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)

valordescribir
no cualquieraparte superior sin bordes (este es el valor predeterminado)
div { borde superior: ninguno; }
durosimple, recto, sólido
div {borde superior: sólido;}
embellecidoserie de puntos
div {borde superior: punteado;}
linea punteadaSerie de guiones
div { borde superior: discontinuo; }
dobleLas dos líneas se suman a la cantidad de píxeles definidos por el ancho superior del borde
div { borde superior: doble; }
ranuraefecto de grabado
div { borde superior: surco; }
crestaAspecto 3D, la parte superior del borde parece “salir” (frente a la ranura)
div {borde superior: cresta;}
ilustraciónApariencia incrustada
div { borde superior: inserción; }
al principioApariencia en relieve (a diferencia de la ilustración)
div { borde superior: inicio; }
ocultoel borde está oculto
div {borde superior: oculto;}
heredarEl 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:

valordescribir
#RRGGBBrepresentació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); }
nombreNombre del color superior del borde (es decir, rojo, azul, negro, blanco)
div { borde superior: rojo; }
transparenteNo muestre los bordes pero aún así ocupe espacio en la página
div { borde superior: transparente; }
heredarEl 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); }
(Visited 13 times, 1 visits today)