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 inferior del borde
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada borde inferior Con sintaxis y ejemplos.
describir
La propiedad border-bottom de CSS define el ancho, el estilo de línea y el color del borde inferior del cuadro. Es una propiedad abreviada para configurar las propiedades CSS border-bottom-width, border-bottom-style y border-bottom-color.
sintaxis
La sintaxis de la propiedad CSS del borde inferior es:
border-bottom: border-bottom-width border-bottom-style border-bottom-color;parámetro o parámetro
border-bottom-width es el ancho del borde inferior del cuadro, que puede ser uno de los siguientes:
(Si no se proporciona el ancho inferior del borde, el valor predeterminado es medio)
| valor | describir |
|---|---|
| estable | valor fijo en px, em, … div { borde inferior: 2px; } |
| finamente | Ancho inferior del borde delgado, puede ser 1px o 2px dependiendo del navegador div {borde inferior: delgado;} |
| Moderar | Ancho inferior del borde medio, puede ser de 3px o 4px dependiendo del navegador div { borde inferior: medio; } |
| Grueso | Ancho inferior del borde grueso, puede ser 5px o 6px dependiendo del navegador div {borde inferior: grueso;} |
border-bottom-style es el estilo de línea para el borde inferior del cuadro, que puede ser uno de los siguientes:
(el valor predeterminado es ninguno si no se proporciona el estilo de borde inferior)
| valor | describir |
|---|---|
| no cualquiera | parte inferior sin bordes (este es el valor predeterminado) div { borde inferior: ninguno; } |
| duro | simple, recto, sólido div { borde inferior: sólido; } |
| embellecido | serie de puntos div {borde inferior: punteado;} |
| linea punteada | Serie de guiones div { borde inferior: discontinuo; } |
| doble | Las dos líneas suman la cantidad de píxeles definidos por border-bottom-width div { borde inferior: doble; } |
| ranura | efecto de grabado div { borde inferior: surco; } |
| cresta | La parte inferior del bisel se ve como un aspecto 3D “fuera” (frente a la ranura) div {borde inferior: cresta;} |
| ilustración | Apariencia incrustada div { borde inferior: inserción; } |
| al principio | Apariencia en relieve (a diferencia de la ilustración) div { borde inferior: inicio; } |
| oculto | el borde está oculto div { borde inferior: oculto; } |
| heredar | El elemento heredará el estilo de la parte inferior del borde de su elemento principal div { borde inferior: heredar; } |
border-bottom-color es el color del borde inferior del cuadro, que puede ser uno de los siguientes:
| valor | describir |
|---|---|
| #RRGGBB | representación hexadecimal del color base del borde div { borde inferior: #FF0000; } |
| RGB() | Representación RGB del color de fondo del borde div {borde inferior: rgb(255, 0, 0); } |
| nombre | El nombre del color de fondo del borde (es decir, rojo, azul, negro, blanco) div { borde inferior: rojo; } |
| transparente | No muestre los bordes pero aún así ocupe espacio en la página div { borde inferior: transparente; } |
| heredar | El elemento heredará el color inferior del borde de su elemento principal div { borde inferior: heredar; } |
notas
- Al usar la propiedad border-bottom, puede proporcionar uno o todos los valores (valores border-bottom-width, border-bottom-style y border-bottom-width), y puede proporcionarlos en cualquier orden.
- Debe proporcionar un valor para el estilo de borde inferior para mostrar el borde inferior.
- Consulte también las propiedades border-bottom-color, border-bottom-style y border-bottom-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-bottom 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-bottom a continuación, explorando ejemplos de cómo usarla en CSS.
Por ejemplo:
div { border-bottom: solid; }En este ejemplo de la parte inferior del borde de CSS, vamos a
A continuación, veremos un ejemplo de borde inferior de CSS en el que proporcionamos valores de ancho de borde inferior, estilo de borde inferior y color de borde inferior.
div { border-bottom: 2px solid black; }En este ejemplo de la parte inferior del borde de CSS, configuramos el ancho de la parte inferior del borde en 2 px, el estilo de la parte inferior del borde en un color sólido y el color de la parte inferior del borde en negro.
Podemos reescribir este ejemplo usando valores hexadecimales negros de la siguiente manera:
div { border-bottom: 2px solid #000000; }O podríamos reescribir este ejemplo con valores rgb() negros de la siguiente manera:
div { border-bottom: 2px solid rgb(0,0,0); }