los border-colortaquigrafíaCSS La propiedad establece el color del borde de un elemento.

Cada lado se puede configurar individualmente usando border-top-color, border-right-color, border-bottom-color, y border-left-color; o usando el modo de escritura consciente border-block-start-color, border-block-end-color, border-inline-start-color, y border-inline-end-color.

Puede encontrar más información sobre los colores de los bordes en Fronteras en Aplicar color a elementos HTML usando CSS.

Propiedades constituyentes

Esta propiedad es una abreviatura de las siguientes propiedades CSS:

  • border-bottom-color
  • border-left-color
  • border-right-color
  • border-top-color

Sintaxis

/*  values */border-color: red;/* top and bottom | left and right */border-color: red #f015ca;/* top | left and right | bottom */border-color: red rgb(240,30,50,.7) green;/* top | right | bottom | left */border-color: red yellow green blue;/* Global values */border-color: inherit;border-color: initial;border-color: unset;

los border-color La propiedad se puede especificar usando uno, dos, tres o cuatro valores.

  • Cuando uno se especifica el valor, aplica el mismo color a los cuatro lados.
  • Cuando dos se especifican los valores, el primer color se aplica a la arriba y abajo, el segundo al izquierda y derecha.
  • Cuando Tres se especifican los valores, el primer color se aplica al cima, el segundo al izquierda y derecha, el tercero al fondo.
  • Cuando cuatro se especifican los valores, los colores se aplican a la cima, Derecha, fondo, y izquierda en ese orden (en el sentido de las agujas del reloj).

Valores

Define el color del borde.

Definicion formal

Valor inicial como cada una de las propiedades de la taquigrafía:

  • border-top-color: currentcolor
  • border-right-color: currentcolor
  • border-bottom-color: currentcolor
  • border-left-color: currentcolor
Se aplica a todos los elementos. También se aplica a ::first-letter.
Heredado no
Valor calculado como cada una de las propiedades de la taquigrafía:

  • border-bottom-color: color calculado
  • border-left-color: color calculado
  • border-right-color: color calculado
  • border-top-color: color calculado
Tipo de animación como cada una de las propiedades de la taquigrafía:

  • border-bottom-color: un color
  • border-left-color: un color
  • border-right-color: un color
  • border-top-color: un color

Sintaxis formal

1,4
where 
 = ||||  || currentcolor |
where 
 = rgb( 3[ / ]? ) | rgb( 3[ / ]? ) | rgb( #3 , ? ) | rgb( #3 , ? )
 = rgba( 3[ / ]? ) | rgba( 3[ / ]? ) | rgba( #3 , ? ) | rgba( #3 , ? )
 = hsl( [ / ]? ) | hsl( , , , ? )
 = hsla( [ / ]? ) | hsla( , , , ? )
where 
 = |
 = |

Ejemplos de

Uso completo del color del borde

HTML

<divid="justone"><p><code>border-color: red;code> is equivalent top><ul><li><code>border-top-color: red;code>li><li><code>border-right-color: red;code>li><li><code>border-bottom-color: red;code>li><li><code>border-left-color: red;code>li>ul>div><divid="horzvert"><p><code>border-color: gold red;code> is equivalent top><ul><li><code>border-top-color: gold;code>li><li><code>border-right-color: red;code>li><li><code>border-bottom-color: gold;code>li><li><code>border-left-color: red;code>li>ul>div><divid="topvertbott"><p><code>border-color: red cyan gold;code> is equivalent top><ul><li><code>border-top-color: red;code>li><li><code>border-right-color: cyan;code>li><li><code>border-bottom-color: gold;code>li><li><code>border-left-color: cyan;code>li>ul>div><divid="trbl"><p><code>border-color: red cyan black gold;code> is equivalent top><ul><li><code>border-top-color: red;code>li><li><code>border-right-color: cyan;code>li><li><code>border-bottom-color: black;code>li><li><code>border-left-color: gold;code>li>ul>div>

CSS

#justoneborder-color: red;#horzvertborder-color: gold red;#topvertbottborder-color: red cyan gold;#trblborder-color: red cyan black gold;/* Set width and style for all divs */divborder: solid 0.3em;width: auto;margin: 0.5em;padding: 0.5em;ulmargin: 0;list-style: none;

Resultado

Especificaciones

Especificación Estado Comentario
Valores y propiedades lógicas de CSS Nivel 1 Borrador del editor Agregó el logical palabra clave.
Módulo de fondos y bordes CSS, nivel 3
La definición de ‘color de borde’ en esa especificación.		 Recomendación candidata los transparent se ha eliminado la palabra clave, ya que ahora forma parte de la tipo de datos.
CSS Nivel 2 (Revisión 1)
La definición de ‘color de borde’ en esa especificación.		 Recomendación La propiedad ahora es una propiedad taquigráfica.
Nivel 1 de CSS
La definición de ‘color de borde’ en esa especificación.		 Recomendación Definición inicial.

Compatibilidad del navegador

Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
border-color 1 12 1Firefox también admite las siguientes propiedades CSS no estándar para configurar los lados del borde en varios colores: -moz-border-top-colors, -moz-border-right-colors, -moz-border-bottom-colors, -moz-border-left-colors 4 3,5 1 4 18 4Firefox también admite las siguientes propiedades CSS no estándar para configurar los lados del borde en varios colores: -moz-border-top-colors, -moz-border-right-colors, -moz-border-bottom-colors, -moz-border-left-colors 10.1 1 1.0

Ver también

  • Propiedades CSS relacionadas con el color del borde: border, border-top-color, border-right-color, border-bottom-color, border-left-color,
  • Otras propiedades CSS relacionadas con los bordes: border-width, border-style
  • los tipo de datos
  • Otras propiedades relacionadas con el color: color, background-color, outline-color, text-decoration-color, text-emphasis-color, text-shadow, caret-color, y column-rule-color
  • Aplicar color a elementos HTML usando CSS