La propiedad border-color se usa para agregar color al borde de un elemento. La propiedad border-color solo funcionará cuando se defina primero la propiedad border-style , que se usa para establecer los bordes. Esta propiedad no funcionará sola. Esto puede tomar de uno a cuatro valores para el borde superior, el borde derecho, el borde inferior y el borde izquierdo, respectivamente. Si no se establece esta propiedad, hereda el color del elemento.
Sintaxis:
border-color: color-value;
Valor predeterminado: el color actual del elemento
Valores de propiedad: donde color-value puede ser cualquiera de los siguientes:
- nombre: Especifica un nombre de color, como “azul”.
- Hex: Especifica un valor hexadecimal, como “#0000ff”.
- RGB: Especifica un valor RGB, como “rgb(0, 0, 255)”.
- transparente: Establece el color del borde del elemento correspondiente a transparente.
La propiedad border-color se puede usar para establecer individualmente usando las siguientes propiedades:
- Propiedad CSS border-left-color : se utiliza para establecer el color del borde izquierdo en un elemento.
- Propiedad CSS border-top-color: puede proporcionar una opción para rellenar un color diferente desde el color del borde principal hasta el borde superior del contenedor.
- Propiedad CSS border-right-color : se utiliza para establecer el color del borde derecho en un elemento.
- Propiedad CSS border-bottom-color : se utiliza para establecer el color del borde inferior de un elemento.
- CSS border-block-color Property: se utiliza para establecer los valores individuales de la propiedad border-color del bloque lógico en un solo lugar en la hoja de estilos.
- CSS border-inline-color Property : se utiliza para establecer los valores de propiedad de color de borde en línea lógicos individuales en un solo lugar en la hoja de estilo.
Entenderemos el valor de cada propiedad a través de los ejemplos.
Establecer valor de color por nombre : todos los 140 nombres de color CSS válidos se pueden asignar al color del borde.
Sintaxis:
border-color: blue;
Ejemplo: Este ejemplo ilustra la propiedad border-color estableciendo el color usando el valor del nombre.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS border-color property</title>
<style>
h1 {
color: #009900;
}
p.one {
border-style: solid;
border-color: blue;
}
p.two {
border-style: solid;
border-color: blue red yellow green;
}
p.three {
border-style: solid;
color: green;
}
</style>
</head>
<body>
<h1 align="center">GeeksforGeeks</h1>
<p class="one">A solid blue border</p>
<p class="two">A solid multicolor border</p>
<p class="three">A solid inherited color border</p>
</body>
</html>
Producción:
Establecer valor de color por HEX : el valor de color HEX se puede asignar al color del borde. El par de valores en #rrggbb representan valores RGB en el sistema hexadecimal.
Sintaxis:
border-color: #0000ff;
Ejemplo: Este ejemplo ilustra la propiedad border-color estableciendo el color usando el valor hexadecimal.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS border-color property</title>
<style>
h1 {
color: #009900;
}
p.one {
border-style: solid;
border-color: #0000ff;
}
p.two {
border-style: solid;
border-color: #0000ff #ff0000 #ffff00 #00ff00;
}
</style>
</head>
<body>
<h1 align="center">GeeksforGeeks</h1>
<p class="one">A solid blue border</p>
<p class="two">A solid multicolor border</p>
</body>
</html>
Producción:
Establecer valor de color por RGB : el valor de color RGB se puede asignar al color del borde. En rgb(r, g, b), los valores r, g y b pueden variar de 0 a 255 para cada uno de los tres.
Sintaxis:
border-color: rgb(0, 0, 255);
Ejemplo: Este ejemplo ilustra la propiedad border-color al configurar el color usando el valor RGB.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS border-color property</title>
<style>
h1 {
color: #009900;
}
p.one {
border-style: solid;
border-color: rgb(0, 0, 255);
}
p.two {
border-style: solid;
border-color: rgb(0, 0, 255)
rgb(255, 0, 0)
rgb(255, 255, 0)
rgb(0, 255, 0);
}
</style>
</head>
<body>
<h1 align="center">GeeksforGeeks</h1>
<p class="one">A solid blue border</p>
<p class="two">A solid multicolor border</p>
</body>
</html>
Producción:
Establezca el valor de color en transparente : el valor transparente se puede asignar al color del borde. El efecto del valor transparente no se observa ya que deja pasar el color de fondo.
Sintaxis:
border-color: transparent;
Ejemplo: Este ejemplo ilustra la propiedad border-color estableciendo el color usando el valor transparente.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS border-color property</title>
<style>
h1 {
color: #009900;
}
p.one {
border-style: solid;
border-color: transparent;
}
</style>
</head>
<body>
<h1 align="center">GeeksforGeeks</h1>
<p class="one">A transparent border</p>
</body>
</html>
Producción:
Notas: La propiedad border-color se puede definir usando uno, dos, tres o cuatro valores, como se indica a continuación:
- Si se asigna un valor de un solo color, lo establecerá en todos los lados.
- Si se asignan dos valores de color, el primer color se establecerá en los lados superior e inferior y el segundo color se establecerá en los lados izquierdo y derecho.
- Si se asignan tres valores de color, el primer color se establece en la parte superior, el segundo a la izquierda y la derecha, el tercero se establece en la parte inferior.
- Si se asignan valores de cuatro colores, los colores se establecen en la parte superior, derecha, inferior e izquierda, siguiendo el orden de las agujas del reloj.
Navegadores compatibles: Los navegadores compatibles con CSS | Las propiedades border-color se enumeran a continuación:
- Google Chrome 1.0
- Internet Explorer 4.0
- Microsoft Edge 12.0
- Firefox 1.0
- Ópera 3.5
- Safari 1.0
Publicación traducida automáticamente
Artículo escrito por omprakash_op y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA