Característica border-color en CSS

La propiedad border-color CSS establece el color del marco de un elemento en todas sus caras: superior ( border-top-color), derecha ( border-right-color), inferior ( border-bottom-color) e izquierda ( border-left-color).

Funciones border-color css

Valor inicial	Para cada valor corto: `border-top-color`: `currentcolorborder-right-color`: `currentcolorborder-bottom-color`: `currentcolorborder-left-color`: `currentcolor`
Aplicado a	Todos los artículos.
Heredable	No
Móvil	Sí
Valor calculado	Para cada valor corto: `border-bottom-color`: color calculado. `border-left-color`: color calculado. `border-right-color`: color calculado. `border-top-color`: color calculado.

/* Aplicar color a todos los lados */  
border-color: red;
border-color: #ffbb00;
border-color: rgb(255, 0, 0);
border-color: hsla(100%, 50%, 25%, 0.75);
border-color: currentcolor;
border-color: transparent;
/* vertical | horizontal */ 
border-color: red #f015ca;
/* top | horizontal | bottom */ 
border-color: red yellow green;
/* top | right | bottom | left */ 
border-color: red yellow green blue;
/* valores globales */ 
border-color: inherit;
border-color: initial;
border-color: unset;

Ejemplos y aplicaciones

En este ejemplo, mostraremos cómo usar la propiedad border-color para establecer el color de un marco especificando uno, dos, tres o cuatro valores en el

Código HTML:

  border-color: #006699;  
  border-color: #006699 salmon;  
  border-color: #006699 rgb(150, 125, 175) salmon;  
  border-color: #006699 rgb(150, 125, 175) salmon hsl(39, 100%, 50%);

Código CSS:

div {
  padding: 1.5em;
  margin: 1.5em;
  border-style: solid;
  border-width: 1em;
}
.one-value {
  border-color: #205a23;
}
.two-values {
  border-color: #205a23 salmon;
}
.three-values {
  border-color: #205a23 rgb(40, 131, 44) salmon;
}
.four-values {
  border-color: #205a23 rgb(40, 131, 44) salmon hsl(39, 100%, 50%);
}

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte básico	1.0	1.0	4	3,5	1.0

Características generales

La propiedad se puede especificar con un valor border-color, dos valores, tres valores o cuatro valores.

Cuando se especifica un solo valor, se aplicará a todas las facetas del marco.
Cuando se especifican dos valores, el primer valor se aplicará a los marcos superior e inferior, y el segundo valor a los marcos izquierdo y derecho.
Donde se especifican tres valores, el primer valor se aplicará al marco superior, el segundo valor a los marcos izquierdo y derecho y el tercer valor al marco inferior.
Cuando se especifican cuatro valores, los valores se aplicarán al lado superior, derecho, inferior e izquierdo, respectivamente (es decir, la rotación comienza desde el lado superior y continúa en el sentido de las agujas del reloj).

Un valor de color que especifica de qué color será el marco.

Estructura formal

border-color: {1,4};

Vea también

La página de propiedades establecido por la propiedad de acceso directo border-color: border-top-color, border-right-color, border-bottom-color, y border-left-color.
La página de propiedades establecida por la propiedad de acceso directo border: border-width y border-style.
Propiedad de la página color y valor de color .