Característica border-color en CSS

por
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 inicialPara cada valor corto: border-top-color: currentcolorborder-right-color: currentcolorborder-bottom-color: currentcolorborder-left-color: currentcolor
Aplicado aTodos los artículos.
HeredableNo
MóvilSí
Valor calculadoPara 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 <div>. 

Código HTML:

<div class="one-value"> <code> border-color: #006699; </code> </div>
<div class="two-values"> <code> border-color: #006699 salmon; </code> </div>
<div class="three-values"> <code> border-color: #006699 rgb(150, 125, 175) salmon; </code> </div>
<div class="four-values"> <code> border-color: #006699 rgb(150, 125, 175) salmon hsl(39, 100%, 50%); </code> </div>

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ísticaChromeFirefoxIEÓperaSafari
Soporte básico1.01.043,51.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).

<color>

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

Estructura formal

border-color: <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 <color>.