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 color de borde
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada color del borde Con sintaxis y ejemplos.
describir
La propiedad CSS border-color define el color del borde de un cuadro.
sintaxis
La propiedad CSS border-color se puede representar mediante uno, dos, tres o cuatro de los valores proporcionados.
sintaxis – un valor
Sintaxis de CSS propiedad de color de borde (con 1 valor) es:
border-color: all;Cuando se proporciona un valor, el valor del color del borde se aplicará a los cuatro lados del cuadro (es decir, arriba, derecha, abajo, izquierda).
Sintaxis – dos valores
Sintaxis de CSS propiedad de color de borde (con 2 valores) es:
border-color: top_bottom left_right;Cuando se proporcionan dos valores, el primer valor se aplicará a la parte superior e inferior del cuadro. El segundo valor se aplicará a los lados izquierdo y derecho del cuadro.
Sintaxis – tres valores
Sintaxis de CSS propiedad de color de borde (con 3 valores) es:
border-color: top right_left bottom;Cuando se proporcionen tres valores, el primer valor se aplicará en la parte superior del cuadro. El segundo valor se aplicará a los lados derecho e izquierdo del cuadro. El tercer valor se aplicará en la parte inferior del cuadro.
Sintaxis: cuatro valores
Sintaxis de CSS propiedad de color de borde (con 4 valores) es:
border-color: top right bottom left;Cuando se proporcionan cuatro valores, el primer valor se aplicará en la parte superior del cuadro. El segundo valor se aplicará al lado derecho del cuadro. El tercer valor se aplicará en la parte inferior del cuadro. El cuarto valor se aplicará al lado izquierdo del cuadro.
Los valores de color de los bordes superior, derecho, inferior e izquierdo pueden ser uno de los siguientes:
| valor | describir |
|---|---|
| #RRGGBB | representación hexadecimal del color del borde p { color del borde: #FF0000; } |
| RGB() | Representación RGB del color del borde p { color del borde: rgb (255,0,0); } |
| nombre | El nombre del color del borde (es decir, rojo, azul, negro, blanco) p { color del borde: rojo; } |
| transparente | No muestre los bordes pero aún así ocupe espacio en la página p { color del borde: transparente; } |
| heredar | El elemento heredará el color del borde de su elemento principal p {borde-color: heredado;} |
notas
- En la propiedad CSS border-color, puede combinar diferentes valores de border-color para los lados superior, derecho, inferior e izquierdo del cuadro.
- Asegúrese de establecer la propiedad de estilo de borde para asegurarse de que aparezcan sus bordes.
- Consulte también las propiedades de borde, estilo de borde y ancho de borde.
- ¿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-color 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
Analizaremos la propiedad border-color a continuación, explorando ejemplos de cómo usar esta propiedad para 1, 2, 3 o 4 valores en CSS.
div { border-color: #FF0000; border-style: solid; }En este ejemplo de color de borde CSS, proporcionamos un valor de #FF0000, que se aplicará a los 4 lados del cuadro. Asegúrese de aplicar un estilo de borde para que aparezca el borde.
A continuación, veremos un ejemplo de color de borde CSS que proporciona dos valores.
div { border-color: #FF0000 black; border-style: solid; }En este ejemplo de color de borde CSS, proporcionamos dos valores. El primer valor de #FF0000 se aplicará a la parte superior e inferior del cuadro. El segundo valor en negro se aplicará a los lados izquierdo y derecho del cuadro.
A continuación, veremos un ejemplo de color de borde CSS que proporciona tres valores.
div { border-color: blue red yellow; border-style: solid; }En este ejemplo de color de borde CSS, proporcionamos tres valores. El primer valor de azul se aplicará a la parte superior del cuadro. El segundo valor de rojo se aplicará a los lados derecho e izquierdo del cuadro. El tercer valor en amarillo se aplicará en la parte inferior del cuadro.
A continuación, veremos un ejemplo de color de borde CSS que proporciona cuatro valores.
div { border-color: rgb(0,0,0) yellow #CCCCCC #D3D3D3; border-style: solid; }En este ejemplo de color de borde CSS, proporcionamos cuatro valores. El primer valor de rgb(0,0,0) se aplicará a la parte superior del elemento. El segundo valor en amarillo se aplicará al lado derecho del cuadro. El tercer valor de #CCCCCC se aplicará en la parte inferior del cuadro. El cuarto valor de #D3D3D3 se aplicará al lado izquierdo del cuadro.