CSS Outline

The outline property in CSS is used to create a visible border around an element without affecting the layout. It’s commonly utilized to highlight elements, especially during focus or for quick styling purposes.


Properties of Outline

  • outline-color

    • Specifies the color of the outline. Accepts color names, hex codes, RGB/RGBA values.

    • Default value : invert (usually results in a system-dependent color, often black or the text color inverted).


  • outline-style

    • Determines the style of the outline. Values include dotted, dashed, solid, double, etc.

    • Default value : none.


  • outline-width

    • Sets the thickness of the outline. Accepts values in pixels (px), ems (em), rems (rem), etc.

    • Default value : medium.


  • outline-offset

    • Specifies the space between the outline and the border or edge of the element.

    • Default value : 0.

Share