---
title: outline-color
slug: Web/CSS/outline-color
tags:
  - Contorno CSS
  - Propiedad CSS
translation_of: Web/CSS/outline-color
---
<div><span style="line-height: 1.5;">{{CSSRef}}</span></div>

<h2 id="Resumen">Resumen</h2>

<p>La propiedad CSS <strong><code>outline-color</code></strong> establece el color del contorno de un elemento. Un contorno es una línea que se dibuja al rededor de los elementos, fuera de los límites del borde, para resaltar al elemento.</p>

<p>{{cssinfo}}</p>

<h2 id="Sintaxis">Sintaxis</h2>

<pre class="brush:css">/* Valores clave */
outline-color: invert;
outline-color: red;

/* Valores globales */
outline-color: inherit;
outline-color: initial;
outline-color: unset;
</pre>

<h3 id="Valores">Valores</h3>

<dl>
 <dt><code>&lt;color&gt;</code></dt>
 <dd>Ver {{cssxref("&lt;color&gt;")}} para las diferentes palabras clave y notaciones de colores.</dd>
 <dt><code>invert</code></dt>
 <dd>Para asegurarse que el contorno es visible, este valor realiza una inversión del color de fondo. Esto hace el contorno más sobresaliente, sin importar el color de fondo. Nótese que los navegadores pueden no soportar este valor. De ser así, solamente considerarán la declaración como inválida</dd>
</dl>

<h3 id="Sintaxis_formal">Sintaxis formal</h3>

{{csssyntax}}

<h2 id="Ejemplo">Ejemplo</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html;">&lt;p class="example"&gt;My outline is blue, da ba dee.&lt;/p&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css; highlight:[3]">.example {
  /* primero debe definirse la propiedad "outline" */
  outline: 2px solid;
  /* hacer el contorno azul */
  outline-color: #0000FF;
}</pre>

<h3 id="En_vivo">En vivo:</h3>

<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/outline-color') }}</p>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentarios</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Basic UI', '#outline-color', 'outline-color')}}</td>
   <td>{{Spec2('CSS3 Basic UI')}}</td>
   <td>Sin cambios</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'outline-color')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td>Define <code>outline-color</code> como propiedad que se puede animar.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline-color', 'outline-color')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Definición inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegadores</h2>

{{Compat("css.properties.outline-color")}}