CSS Padding Property: Complete Guide with Syntax and Examples

INTRODUCTION

The outline-color property sets the color of an element’s outline. Outlines are drawn outside the element’s border and do not affect layout (unlike borders).

Possible values

The outline-color property can take the following types.

• [color] - It includes Named Colors, Hexadecimal values, rgb/rgba, hsl/hsla, hwb, lch, oklab and others.
• invert - It tells the browser to try to pick a color that contrasts with the background—usually by inverting the background color (browser support is limited).
• currentcolor - The currentColor keyword reflects the value of an element’s color property. The currentColor keyword uses the element’s inherited color value. Example

  
  <div class="container">
    The color of this text is blue.
    <div class="child">
    This block has an outline with color set to currentcolor.
    </div>
  </div>
  
  
  .container {
    color: blue;
  }
  .child {
    outline-color: currentcolor;
  }
  

  
  
  The color of this text is blue.

  This block is surrounded by outline with color set to currentcolor.

outline-color: [length] | currentcolor | invert;

outline-color: currentColor;   /* uses the element's text color */
outline-color: red;            /* named color */
outline-color: #00f;           /* hex */
outline-color: transparent;    /* invisible outline */

Frequently Asked Questions (FAQ)

<div class="container">
  The color of this text is blue.
  <div class="child">
  This block has an outline with color set to currentcolor.
  </div>
</div>


.container {
  color: blue;
}
.child {
  outline-color: currentcolor;
}