Color de contorno CSS

Tabla de contenido

    Mostrar tabla de contenidos

Color de contorno CSS

La propiedad outline-color se utiliza para establecer el color del contorno.

El color se puede configurar mediante:

  • nombre: especifique un nombre de color, como "rojo"

  • HEX: especifique un valor hexadecimal, como "#ff0000"

  • RGB: especifique un valor RGB, como "rgb(255,0,0)"

  • HSL: especifique un valor HSL, como "hsl(0, 100%, 50%)"

  • invertir: realiza una inversión de color (lo que garantiza que el contorno sea visible, independientemente del color de fondo)

El siguiente ejemplo muestra algunos contornos diferentes con diferentes colores. Observe también que estos elementos también tienen un borde negro delgado dentro del contorno:

A solid red outline.

A dotted blue outline.

An outset grey outline.

Ejemplo

p.ex1
{
    border: 2px solid black;	outline-style: solid;
  outline-color: red;
}
p.ex2
{
  border: 2px solid black;	outline-style: dotted;
   
outline-color: blue;
}
p.ex3
{
  border: 2px solid black;
  outline-style: outset;
  outline-color: grey;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: red;
}

p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: blue;
}

p.ex3 {
  border: 2px solid black;
  outline-style: outset;
  outline-color: grey;
}
</style>
</head>
<body>

<h2>The outline-color Property</h2>
<p>The outline-color property is used to set the color of the outline.</p>

<p class="ex1">A solid red outline.</p>
<p class="ex2">A dotted blue outline.</p>
<p class="ex3">An outset grey outline.</p>

</body>
</html>

Valores hexagonales

El color del contorno también se puede especificar mediante un valor hexadecimal (HEX):

Ejemplo

 p.ex1 {
  outline-style: solid;
  outline-color: #ff0000; 
  /* red */
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: #ff0000; /* red */
}

p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: #0000ff; /* blue */
}

p.ex3 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: #bbbbbb; /* grey */
}
</style>
</head>
<body>

<h2>The outline-color Property</h2>
<p>The color of the outline can also be specified using a hexadecimal value (HEX):</p>

<p class="ex1">A solid red outline.</p>
<p class="ex2">A dotted blue outline.</p>
<p class="ex3">A solid grey outline.</p>

</body>
</html>

Valores RGB

O usando valores RGB:

Ejemplo

 p.ex1 {
  outline-style: solid;
  outline-color: rgb(255, 0, 0); /* 
  red */
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: rgb(255, 0, 0); /* red */
}

p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: rgb(0, 0, 255); /* blue */
}

p.ex3 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: rgb(187, 187, 187); /* grey */
}
</style>
</head>
<body>

<h2>The outline-color Property</h2>
<p>The color of the outline can also be specified using RGB values:</p>

<p class="ex1">A solid red outline.</p>
<p class="ex2">A dotted blue outline.</p>
<p class="ex3">A solid grey outline.</p>

</body>
</html>

Valores HSL

También puede utilizar valores HSL:

Ejemplo

 p.ex1 {
  outline-style: solid;
  outline-color: hsl(0, 100%, 50%); 
  /* red */
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: hsl(0, 100%, 50%); /* red */
}

p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: hsl(240, 100%, 50%); /* blue */
}

p.ex3 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: hsl(0, 0%, 73%); /* grey */
}
</style>
</head>
<body>

<h2>The outline-color Property</h2>
<p>The color of the outline can also be specified using HSL values:</p>

<p class="ex1">A solid red outline.</p>
<p class="ex2">A dotted blue outline.</p>
<p class="ex3">A solid grey outline.</p>

</body>
</html>

Puede obtener más información sobre los valores HEX, RGB y HSL en nuestros capítulos de Colores CSS.