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 estilo de borde inferior
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada estilo de borde inferior Con sintaxis y ejemplos.
describir
La propiedad CSS border-bottom-style define el estilo de línea del borde inferior del cuadro.
sintaxis
La sintaxis de la propiedad CSS estilo borde inferior es:
border-bottom-style: value;parámetro o parámetro
valor
El estilo de línea utilizado para el borde inferior. Puede ser uno de los siguientes:
| valor | describir |
|---|---|
| no cualquiera | Sin bordes (este es el valor predeterminado) div { estilo de borde inferior: ninguno; } |
| duro | simple, recto, sólido div {estilo inferior del borde: sólido;} |
| embellecido | serie de puntos div {borde-fondo-estilo: punteado;} |
| linea punteada | Serie de guiones div {estilo inferior del borde: discontinuo;} |
| doble | Las dos líneas suman la cantidad de píxeles definidos por border-bottom-width div {estilo inferior del borde: doble;} |
| ranura | efecto de grabado div {estilo inferior del borde: ranura;} |
| cresta | Parece que el borde está “saliendo” del aspecto 3D (frente a la ranura) div {estilo inferior del borde: cresta;} |
| ilustración | Apariencia incrustada div {estilo inferior del borde: inserción;} |
| al principio | Apariencia en relieve (a diferencia de la ilustración) div {estilo inferior del borde: inicio;} |
| oculto | el borde está oculto div {estilo inferior del borde: oculto;} |
| heredar | El elemento heredará el estilo de la parte inferior del borde de su elemento principal div {estilo inferior del borde: heredar;} |
notas
- Dado que el valor predeterminado de CSS border-bottom-style es none, debe establecer el valor de CSS border-bottom-style para mostrar el borde inferior.
- Consulte también las propiedades border-bottom-color, border-bottom-width y border-bottom.
Compatibilidad del navegador
La propiedad CSS border-bottom-style 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-style a continuación, explorando ejemplos de cómo usarla en CSS.
Veamos un ejemplo de configuración de un borde inferior sólido.
div { border-bottom-style: solid; }En este ejemplo de estilo de fondo de borde CSS, diseñamos el borde inferior con un color sólido.
Hay otros estilos para elegir. Intentemos establecer el borde inferior en una línea discontinua.
div { border-bottom-style: dashed; border-top-style: double; }En este ejemplo de estilo de borde inferior, configuramos el estilo de borde inferior en discontinuo y el estilo de borde superior en línea doble. Como puede ver, los lados del borde pueden ser completamente diferentes, lo que puede agregar un efecto visual único a su página web.