CSS Cor do Contorno
outline-color é a propriedade usado para cor do
contorno.
name usa-se nome da
cor em inglês- "red"
HEX usa-se o valor
hexadecimal - "#ff0000"
RGB usa-se 0 valor
rgb - "rgb(255,0,0)"
HSL usa-se o valor
hsl - "hsl(0, 100%, 50%)"
Na prática:
<html>
<head>
<style>
p.exem1 {
border: 2px solid
black;
outline-style:
solid;
outline-color: red;
}
p.exem2 {
border: 2px solid
black;
outline-style:
dotted;
outline-color:
blue;
}
p.exem3 {
border: 2px solid
black;
outline-style:
outset;
outline-color:
grey;
}
</style>
</head>
<body>
<h2>A propriedade da cor do contorno</h2>
<p>A propriedade outline-color é usada para definir a
cor do contorno.</p>
<p class="exem1">Um contorno vermelho
sólido.</p>
<p class="exem2">Um contorno azul
pontilhado.</p>
<p class="exem3">Um contorno cinza
inicial.</p>
</body>
</html>
Valores HEX
<!DOCTYPE html>
<html>
<head>
<style>
p.exem1 {
border: 2px solid
black;
outline-style:
solid;
outline-color:
#ff0000; /* red */
}
p.exem2 {
border: 2px solid
black;
outline-style:
dotted;
outline-color:
#0000ff; /* blue */
}
p.exem3 {
border: 2px solid
black;
outline-style:
solid;
outline-color:
#bbbbbb; /* grey */
}
</style>
</head>
<body>
<h2>A propriedade da cor do contorno</h2>
<p>A cor do contorno também pode ser especificada
usando um valor hexadecimal (HEX):</p>
<p class="exem1">Um contorno vermelho sólido.
</p>
<p class="exem2">Um contorno azul pontilhado.
</p>
<p class="exem3">Um contorno cinza sólido.
</p>
</body>
</html>
Valores RGB
<!DOCTYPE html>
<html>
<head>
<style>
p.exem1 {
border: 2px solid
black;
outline-style:
solid;
outline-color:
rgb(255, 0, 0); /* red */
}
p.exem2 {
border: 2px solid
black;
outline-style:
dotted;
outline-color:
rgb(0, 0, 255); /* blue */
}
p.exem3 {
border: 2px solid
black;
outline-style:
solid;
outline-color: rgb(187,
187, 187); /* grey */
}
</style>
</head>
<body>
<h2>A propriedade da cor do contorno</h2>
<p>A cor do contorno também pode ser especificada
usando valores RGB:</p>
<p class="exem1">Um contorno vermelho
sólido.</p>
<p class="exem2">Um contorno azul
pontilhado.</p>
<p class="exem3">Um contorno cinza
sólido.</p>
</body>
</html>
Valores HSL
<!DOCTYPE html>
<html>
<head>
<style>
p.exem1 {
border: 2px solid
black;
outline-style:
solid;
outline-color:
hsl(0, 100%, 50%); /* red */
}
p.exem2 {
border: 2px solid
black;
outline-style:
dotted;
outline-color:
hsl(240, 100%, 50%); /* blue */
}
p.exem3 {
border: 2px solid
black;
outline-style:
solid;
outline-color:
hsl(0, 0%, 73%); /* grey */
}
</style>
</head>
<body>
<h2>A propriedade da cor do contorno</h2>
<p>A cor do contorno também pode ser especificada
usando valores HSL:</p>
<p class="exem1">Um contorno vermelho
sólido.</p>
<p class="exem2">Um contorno azul
pontilhado.</p>
<p class="exem3">Um contorno cinza
sólido.</p>
</body>
</html>