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