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); }