Cor da Borda do CSS
border-color é a propriedade para definir cor quatro bordas.
A cor pode ser definida:
Ø
Nome da cor em inglês:” red” (vermelho)
Ø HEX com valor: "#ff0000"
Ø RGB com valor: "rgb(255,0,0)"
Ø
HSL com valor: "hsl(0, 100%,
50%)"
Ø Transparente
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color: blue;
}
</style>
</head>
<body>
<h2>Propriedade
cor da borda</h2>
<p>Esta
propriedade especifica a cor das quatro bordas</p>
<p
class="one">Borda sólida e vermelho</p>
<p
class="two">Borda sólida e verde</p>
<p class="three">Borda
pontilhada e azul</p>
</body>
</HTML>
CORES LATERAIS ESPECÍFICAS
border-color propriedade pode ter de um a quatro valores (para a borda
superior, borda direita, borda inferior e borda esquerda).
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style:
solid;
border-color: red
green blue yellow; /* topo vermelho, direito verde, fundo azul e esquerdo
amarelo */
}
</style>
</head>
<body>
<h2>A propriedade border-color</h2>
<p>A propriedade border-color pode ter de um a quatro
valores (para a borda superior, borda direita, borda inferior e borda esquerda)
</p>
<p class="one">Uma borda multicolorida
sólida</p>
</body>
</html>
Valores HEX
valor hexadecimal (HEX)
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style:
solid;
border-color:
#ff0000; /* vermelho */
}
p.two {
border-style:
solid;
border-color:
#0000ff; /* azul */
}
p.three {
border-style:
solid;
border-color:
#bbbbbb; /* cinza */
}
</style>
</head>
<body>
<h2>Propriedade border-colro</h2>
<p>A cor da borda também pode ser especificada usando
um valor hexadecimal (HEX)</p>
<p class="one">Borda sólida e cor vermelho.
</p>
<p class="two">Borda sólida e cor azul.
</p>
<p class="three">Borda sólida e cor cinza.
</p>
</body>
</html>
Valores RGB
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color:
rgb(255, 0, 0); /* vermelho*/
}
p.two {
border-style: solid;
border-color: rgb(0,
0, 255); /* azul */
}
p.three {
border-style: solid;
border-color:
rgb(187, 187, 187); /* cinza */
}
</style>
</head>
<body>
<h2>Propriedade border-color</h2>
<p>A cor da borda também pode ser especificada usando
valores RGB</p>
<p class="one">Borda sólida e vermelho.
</p>
<p class="two">Borda sólida e azul.
</p>
<p class="three">Borda sólida e
cinza</p>
</body>
</html>
Valores HSL
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style:
solid;
border-color:
hsl(0, 100%, 50%); /* vermelho */
}
p.two {
border-style:
solid;
border-color:
hsl(240, 100%, 50%); /* azul */
}
p.three {
border-style:
solid;
border-color:
hsl(0, 0%, 73%); /* cinza */
}
</style>
</head>
<body>
<h2>TPropriedade border-color</h2>
<p>A cor da borda também pode ser especificada usando
valores HSL:</p>
<p class="one"> Borda sólida e vermelho.
</p>
<p class="two">Borda sólida e azul.
</p>
<p class="three">Borda sólida e cinza.
</p>
</body>
</html>