CSS | Propiedad de color de contorno

La propiedad de color de contorno de CSS establece el color de contorno de un elemento.

Sintaxis

outline-color: <color> | invert | inherit;

El valor de la propiedad:

<color>: establece el color del contorno en cualquier color CSS válido.

Ejemplo: contorno-color: negro;

<!DOCTYPE html>
<html>
  
<head>
    <title>CSS outline-color property</title>
  
    <!-- Internal CSS Style Sheet -->
    <style>
        h1 {
            color: green;
            text-align: center;
            outline-width: 5px;
            outline-style: dashed;
            /* CSS property for outline-color */
            outline-color: black;
        }
    </style>
  
</head>
  
<body>
    <!-- outline-color: black;-->
    <h1>GeeksForGeeks</h1>
</body>
  
</html>

Producción:
outline-color-name

Ejemplo: contorno-color: #FF00FF;

<!DOCTYPE html>
<html>
  
<head>
    <title>CSS outline-color property</title>
  
    <!-- Internal CSS Style Sheet -->
    <style>
        h1 {
            color: green;
            text-align: center;
            outline-width: 5px;
            outline-style: dashed;
            /* CSS property for outline-color */
            outline-color: #FF00FF;
        }
    </style>
  
</head>
  
<body>
    <!-- outline-color: #FF00FF;-->
    <h1>GeeksForGeeks</h1>
</body>
  
</html>

Producción:
outline-color-code

Ejemplo: contorno-color: rgb(0, 0, 255);

<!DOCTYPE html>
<html>
  
<head>
    <title>CSS outline-color property</title>
  
    <!-- Internal CSS Style Sheet -->
    <style>
        h1 {
            color: green;
            text-align: center;
            outline-width: 5px;
            outline-style: dashed;
            /* CSS property for outline-color */
            outline-color: rgb(0, 0, 255);
        }
    </style>
  
</head>
  
<body>
    <!-- outline-color: rgb(0, 0, 255);-->
    <h1>GeeksForGeeks</h1>
</body>
  
</html>

Producción:
outline-color-rgb

Ejemplo: contorno-color: hsl(0, 100%, 50%);

<!DOCTYPE html>
<html>
  
<head>
    <title>CSS outline-color property</title>
  
    <!-- Internal CSS Style Sheet -->
    <style>
        h1 {
            color: green;
            text-align: center;
            outline-width: 5px;
            outline-style: dashed;
            /* CSS property for outline-color */
            outline-color: hsl(0, 100%, 50%);
        }
    </style>
  
</head>
  
<body>
    <!-- outline-color: hsl(0, 100%, 50%);-->
    <h1>GeeksForGeeks</h1>
</body>
  
</html>

Producción:
outline-color-hsl

invertir: establece el color del contorno en un color que es inverso al del fondo, lo que garantiza que el contorno siempre estará visible. Nota: No es compatible con todos los navegadores.

Ejemplo: contorno-color: invertir;

<!DOCTYPE html>
<html>
  
<head>
    <title>CSS outline-color property</title>
  
    <!-- Internal CSS Style Sheet -->
    <style>
        h1 {
            border: 5px solid yellow;
            text-align: center;
            outline-width: 5px;
            outline-style: solid;
            /* CSS property for outline-color */
            outline-color: invert;
        }
    </style>
  
</head>
  
<body>
    <!-- outline-color: invert;-->
    <h1>GeeksForGeeks</h1>
</body>
  
</html>

Producción:
outline-color-invert

Heredar: establece el color del contorno de acuerdo con la propiedad de color del contorno heredada de su elemento principal.

Ejemplo: contorno-color: heredar;

<!DOCTYPE html>
<html>
  
<head>
    <title>CSS outline-color property</title>
  
    <!-- Internal CSS Style Sheet -->
    <style>
        body {
            outline-color: red;
        }
          
        h1 {
            text-align: center;
            outline-width: 5px;
            outline-style: solid;
            /* CSS property for outline-color */
            outline-color: inherit;
        }
    </style>
  
</head>
  
<body>
    <!-- outline-color: inherit;-->
    <h1>GeeksForGeeks</h1>
</body>
  
</html>

Producción:
outline-color-inherit

Navegadores compatibles: la propiedad de color de contorno de CSS es compatible con los siguientes navegadores:

cromo 1
Borde 12
Firefox 1.5
explorador de Internet 8
Ópera 7
Safari 1.2

Publicación traducida automáticamente

Artículo escrito por Husban y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta