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

CSS Outline is a feature of the Cascading Style Sheets (CSS) language that allows designers to draw a line around an element or group of elements on a web page. Outlines are used to help separate elements on a page from one another, and to help make the page easier to read and navigate. Outlines can be used to create borders around elements, to create a visual separation between elements, or to highlight a particular element.

Outlines are different from borders in that they are drawn around the element without taking up any space. This means that outlines will not affect the layout of the page and are not visible in the normal flow of the document. Outlines are also different from margins, which are used to create space between elements.

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