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 izquierdo
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada estilo de borde izquierdo Con sintaxis y ejemplos.
describir
La propiedad CSS border-left-style define el estilo de línea para el borde izquierdo de un cuadro.
sintaxis
La sintaxis de la propiedad CSS de estilo de borde izquierdo es:
border-left-style: value;parámetro o parámetro
valor
El estilo de línea utilizado para el borde izquierdo. Puede ser uno de los siguientes:
| valor | describir |
|---|---|
| no cualquiera | Sin bordes (este es el valor predeterminado) div {estilo del borde izquierdo: ninguno;} |
| duro | simple, recto, sólido div {estilo del borde izquierdo: sólido;} |
| embellecido | serie de puntos div {borde-izquierda-estilo: punteado;} |
| linea punteada | Serie de guiones div {estilo del borde izquierdo: discontinuo;} |
| doble | Dos líneas, sumando la cantidad de píxeles definidos por border-left-width div {estilo del borde izquierdo: doble;} |
| ranura | efecto de grabado div {estilo del borde izquierdo: surco;} |
| cresta | Parece que el borde está “saliendo” del aspecto 3D (frente a la ranura) div {estilo del borde izquierdo: cresta;} |
| ilustración | Apariencia incrustada div {estilo del borde izquierdo: inserción;} |
| al principio | Apariencia en relieve (a diferencia de la ilustración) div {estilo del borde izquierdo: inicio;} |
| oculto | el borde está oculto div {estilo del borde izquierdo: oculto;} |
| heredar | El elemento heredará el estilo del borde izquierdo de su elemento principal div {estilo del borde izquierdo: heredar;} |
notas
- Dado que el valor predeterminado de CSS border-left-style es none, debe establecer el valor de CSS border-left-style para mostrar el borde izquierdo.
- Consulte también las propiedades border-left-color, border-left-width y border-left.
Compatibilidad del navegador
La propiedad CSS border-left-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-left-style a continuación, explorando ejemplos de cómo usarla en CSS.
Veamos un ejemplo de configuración de un borde izquierdo discontinuo.
div { border-left-style: dashed; }En este ejemplo de estilo de borde izquierdo CSS, configuramos el estilo del borde izquierdo en discontinuo.
A continuación, apliquemos estilo a los bordes izquierdo y superior.
div { border-left-style: solid; border-top-style: double; }En este ejemplo de estilo de borde izquierdo, configuramos el estilo de borde izquierdo en línea sólida 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.