Atributo border-color CSS

Definición y uso

La propiedad border-color establece el color de los cuatro bordes. Esta propiedad puede establecer de 1 a 4 colores.

La propiedad border-color es una propiedad abreviada que permite establecer el color de la parte visible de todos los bordes de un elemento, o establecer diferentes colores para cada uno de los 4 bordes. Vea el siguiente ejemplo:

Ejemplo 1

border-color:red green blue pink;
  • El borde superior es rojo
  • El borde derecho es verde
  • El borde inferior es azul
  • El borde izquierdo es rosa

Ejemplo 2

border-color:red green blue;
  • El borde superior es rojo
  • El borde derecho e izquierdo son verdes
  • El borde inferior es azul

Ejemplo 3

border-color:dotted red green;
  • El borde superior e inferior son rojos
  • El borde derecho e izquierdo son verdes

Ejemplo 4

border-color:red;
  • Todos los 4 bordes son rojos

Recuerde, el estilo del borde no puede ser none o hidden, de lo contrario, el borde no aparecerá.

Notas:Siempre declare el atributo border-style antes del atributo border-color. El elemento debe obtener el borde antes de cambiar su color.

Véase también:

Tutorial de CSS:Borde CSS

Manual de referencia de HTML DOM:Atributo borderColor

Ejemplo

Establecer el color de los 4 bordes:

p
  {
  border-style:solid;
  border-color:#ff0000 #0000ff;
  }

Prueba tu mismo

Sintaxis de CSS

border-color: color|transparent|initial|inherit;

Valor del atributo

Valor Descripción
color_name Se especifica el color del borde con un nombre de color (por ejemplo, red).
hex_number Se especifica el color del borde con un valor hexadecimal (por ejemplo, #ff0000).
rgb_number Se especifica el color del borde con un código rgb (por ejemplo, rgb(255,0,0)).
transparent Valor predeterminado. El color del borde es transparente.
inherit Se especifica que el color del borde debe ser heredado del elemento padre.

Detalles técnicos

Valor predeterminado: no especificado
Herencia: no
Versión: CSS1
Sintaxis de JavaScript: object.style.borderColor="#FF0000 blue"

Más ejemplos

Establecer el color de los cuatro bordes
Este ejemplo muestra cómo establecer el color de los cuatro bordes. Se pueden establecer de uno a cuatro colores.

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente la propiedad.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5

Notas:Internet Explorer 6 (y versiones anteriores) no admite el valor de atributo "transparent".

Notas:Los navegadores IE7 y versiones anteriores no admiten el valor "inherit". IE8 requiere !DOCTYPE. IE9 admite "inherit".