CSS Outline

• CSS – Introduction
• CSS – Basics
• CSS – Include CSS File to HTML
• CSS – ID and Class
• CSS – Cascading Order
• CSS – Selector
• CSS – Pseudo Classes
• CSS – Colors
• CSS – Gradients
• CSS – Units
• CSS – Background
• CSS – Border
• CSS – Margin and Padding
• CSS – Height and Width
• CSS – Outline
• CSS – Display and Visibility
• CSS – Position
• CSS – Overlapping Elements
• CSS – Overflow
• CSS – Float
• CSS – Clear and Clearfix
• CSS – Left and Right
• CSS – Transform
• CSS – Opacity / Transparency
• CSS – text-shadow
• CSS – box-shadow
• CSS – object-fit
• CSS – Counters
• CSS – Variables
• CSS – Fonts
• CSS – Text Formatting
• CSS – Graphics
• CSS – Links
• CSS – Lists
• CSS – Tables
• CSS – Horizontal & Vertical Align
• CSS – Image Sprite
• CSS – Transitions
• CSS – 2D Transforms
• CSS – 3D Transforms
• CSS – Animations
• CSS – Media Queries
• CSS – Flexbox

Outline

The outline property in CSS draws a line around the outside of an element. It’s similar to border except that:

• It always goes around all the sides, you can’t specify particular sides
• It’s not a part of the box model, so it won’t affect the position of the element or adjacent elements (nice for debugging!)

div { 
    outline: 4px solid blue; 
}

Outline has 4 modes:

• The outline-width property is used to set the width of the outline.

div {
    outline-width: thick;
}

• The outline-style property is used to set the line style for the outline.

div {
    outline-style: double;
}

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

div {
    outline-color: blueviolet;
}

• The outline-offset property is used to specifies the space between an outline and the edge or border of an element.

div {
      outline: 4px solid red;
      outline-offset: 15px;
}