La propiedad border-color se usa para colorear todos los bordes del contenedor con el mismo color.
La propiedad border-top-color brinda la opción de rellenar un color diferente desde el color del borde principal hasta el borde superior del contenedor.
Nota: tenga cuidado con el orden al escribir la declaración en CSS, es decir, CSS tomará el último valor de la propiedad. Por lo tanto, para la salida esperada, siempre escriba border-top-color debajo de border-color.
Sintaxis:
border-top-color: color|transparent|initial|inherit;
Valor predeterminado: el color actual del elemento
Valores de la Propiedad:
color: Establece el color del borde superior del Elemento.
- Sintaxis:
border-top-color: color
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | border-top-color Property
</title>
<style>
h1 {
color: green;
}
h3 {
border: 2px solid green;
border-top-color: red;
width: 50%;
}
</style>
</head>
<body>
<center>
<h1>GeeksForGeeks</h1>
<h2>border-top-color:color;</h2>
<h3>GeeksForGeeks</h3>
<!-- Sets the color-->
<p style="border-style:dotted;
border-top-color:coral;
width:70%;">
It is a computer science portal for geeks.</p>
</body>
</html>
- Producción:
Transparente: Especifica el valor transparente del borde superior.
- Sintaxis:
border-top-color:transparent;
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | border-top-color Property
</title>
<style>
h1 {
color: green;
}
h3 {
border: 2px solid green;
border-top-color: transparent;
width: 50%;
}
</style>
</head>
<body>
<center>
<h1>GeeksForGeeks</h1>
<h2>border-top-color:transparent</h2>
<h3>GeeksForGeeks</h3>
<!-- Sets the color to transparent-->
<p style="border-style:dotted;
border-top-color:transparent;
width:70%;">
It is a computer science portal for geeks.</p>
</body>
</html>
- Producción:
initial: Establece la Propiedad a su valor por defecto.
- Sintaxis:
border-top-color:initial;
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | border-top-color Property
</title>
<style>
h1 {
color: green;
}
h3 {
border: 2px solid green;
border-top-color: initial;
width: 50%;
}
</style>
</head>
<body>
<center>
<h1>GeeksForGeeks</h1>
<h2>border-top-color:initial;</h2>
<h3>GeeksForGeeks</h3>
<!-- Sets the color to its default value-->
<p style="border-style:dotted;
border-top-color:initial;
width:70%;">
It is a computer science portal for geeks.</p>
</body>
</html>
- Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad CSS border-top-color se enumeran a continuación:
- Google Chrome 1.0
- Internet Explorer 4.0
- Firefox 1.0
- Ópera 3.5
- Apple Safari 1.0
Publicación traducida automáticamente
Artículo escrito por vishalsharmagbpec y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA