
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 inicial | Para cada valor corto: border-top-color : currentcolorborder-right-color : currentcolorborder-bottom-color : currentcolorborder-left-color : currentcolor |
---|---|
Aplicado a | Todos los artículos. |
Heredable | No |
Móvil | Sí |
Valor calculado | Para 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ística | Chrome | Firefox | IE | Ópera | Safari |
---|---|---|---|---|---|
Soporte básico | 1.0 | 1.0 | 4 | 3,5 | 1.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
, yborder-left-color
. - La página de propiedades establecida por la propiedad de acceso directo
border
:border-width
yborder-style
. - Propiedad de la página
color
y valor de color<color>
.
- Introducción al Lenguaje de Programación CSS
- Características text-decoration-style en CSS
- Características text-decoration-line en CSS
- Características text-decoration-color en CSS
- Características text-decoration en CSS
- Características text-align-last en CSS
- Características text-align en CSS
- Características tab-size en CSS
- Características overflow-wrap en CSS
- Características line-break en CSS
- Características letter-spacing en CSS
- Características direction en CSS
- Características line-height en CSS
- Características font-style en CSS
- Características font-weight en CSS
- Características font-stretch en CSS
- Características font en CSS
- Características font-size-adjust en CSS
- Características font-size en CSS
- Características font-kerning en CSS
- Características font-family en CSS
- Características order en CSS
- Características justify-content en CSS
- Características flex-wrap en CSS
- Características flex-shrink en CSS
- Características flex-grow en CSS
- Características flex-flow en CSS
- Características flex-direction en CSS
- Características flex-basis en CSS
- Características flex en CSS
- Características align-self en CSS
- Características align-items en CSS
- Características align-content en CSS
- Características overflow-y en CSS
- Características overflow-x en CSS
- Características overflow en CSS
- Características padding-right en CSS
- Características padding-left en CSS
- Características padding-bottom en CSS
- Características margin-top en CSS
- Características padding-top en CSS
- Características margin-right en CSS