Color de borde de CSS

Color de borde de CSS

border-color La propiedad se utiliza para establecer el color de los cuatro bordes.

Se puede establecer el color de la siguiente manera:

  • name - Especificar el nombre del color, por ejemplo "red"
  • HEX - Especificar un valor hexadecimal, por ejemplo "#ff0000"
  • RGB - Especificar un valor RGB, por ejemplo "rgb(255,0,0)"
  • HSL - Especificar un valor HSL, por ejemplo "hsl(0, 100%, 50%)"
  • transparent

Comentarios:Si no se ha configurado border-colorsi no se establece, heredará el color del elemento.

Ejemplo

Demostración de diferentes colores de borde:

p.one {
  border-style: sólido;
  border-color: red;
}
p.two {
  border-style: sólido;
  border-color: green;
}
p.three {
  border-style: dotted;
  border-color: blue;
}

Resultado:

Borde de línea recta roja

Borde de línea recta verde

Borde de puntos azules

Prueba personalmente

Color específico del borde

border-color La propiedad puede establecer un valor de uno a cuatro (usado para el borde superior, derecho, inferior e izquierdo).

Ejemplo

p.one {
  border-style: sólido;
  border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
}

Prueba personalmente

Valores HEX

El color del borde también se puede especificar usando valores hexadecimales (HEX):

Ejemplo

p.one {
  border-style: sólido;
  border-color: #ff0000; /* Rojo */
}

Prueba personalmente

Valores RGB

O usar el valor RGB:

Ejemplo

p.one {
  border-style: sólido;
  border-color: rgb(255, 0, 0); /* Rojo */
}

Prueba personalmente

Valores HSL

También se puede usar el valor HSL:

Ejemplo

p.one {
  border-style: sólido;
  border-color: hsl(0, 100%, 50%); /* Rojo */
}

Prueba personalmente

Puedes probar en Colores de CSS Aprende más sobre los valores HEX, RGB y HSL en el capítulo.