The Speed Coding

CSS Tutorial

CSS Introduction CSS Syntax CSS Selectors CSS How To CSS Comments CSS Colors CSS Backgrounds CSS Borders CSS Margins CSS Padding CSS Height/Width CSS Box Model CSS Outline CSS Text CSS Fonts CSS Icons CSS Links CSS Lists CSS Tables CSS Display CSS Max-width CSS Position CSS Overflow CSS Float CSS Inline-block CSS Align CSS Combinators CSS Pseudo-class CSS Pseudo-element CSS Opacity CSS Navigation Bar CSS Dropdowns CSS Image Gallery CSS Image Sprites CSS Attr Selectors CSS Forms CSS Counters CSS Website Layout CSS Units CSS Specificity

CSS Advanced

CSS Rounded Corners CSS Border Images CSS Backgrounds CSS Colors CSS Gradients CSS Shadows CSS Text Effects CSS Web Fonts CSS 2D Transforms CSS 3D Transforms CSS Transitions CSS Animations CSS Tooltips CSS Style Images CSS object-fit CSS Buttons CSS Pagination CSS Multiple Columns CSS User Interface CSS Variables CSS Box Sizing CSS Flexbox CSS Media Queries CSS MQ Examples

CSS Responsive

RWD Intro RWD Viewport RWD Grid View RWD Media Queries RWD Images RWD Videos RWD Frameworks RWD Templates

CSS Grid

Grid Intro Grid Container Grid Item

CSS References

CSS Reference CSS Selectors CSS Functions CSS Reference Aural CSS Web Safe Fonts CSS Animatable CSS Units CSS PX-EM Converter CSS Colors CSS Color Values CSS Default Values CSS Browser Support

CSS Outline Color


CSS Outline Color

The outline-color property is used to set the color of the outline.

The color can be set by:

  • name - specify a color name, like "red"
  • HEX - specify a hex value, like "#ff0000"
  • RGB - specify a RGB value, like "rgb(255,0,0)"
  • HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
  • invert - performs a color inversion (which ensures that the outline is visible, regardless of color background)

The following example shows some different outlines with different colors. Also notice that these elements also have a thin black border inside the outline:

A solid red outline.

A dotted blue outline.

An outset grey outline.

Example

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;
}

HEX Values

The outline color can also be specified using a hexadecimal value (HEX):

Example

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

RGB Values

Or by using RGB values:

Example

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

HSL Values

You can also use HSL values:

Example

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

You can learn more about HEX, RGB and HSL values in our CSS Colors chapters.


Invert Color

The following example uses outline-color: invert, which performs a color inversion. This ensures that the outline is visible, regardless of color background:

A solid invert outline.

Example

p.ex1 {
  border: 1px solid yellow;
  outline-style : solid;
  outline-color : invert;
}