Outline

introduction

• Introduction to CSS
• How and where to write CSS?
• CSS Selectors
• Size and Other Units of Measurement
• CSS colors
• Other uses of colour

Formatting Text

• CSS Fonts
• Text formatting

Box Model

• Borders
• Margins
• Paddings
• Height and width
• The box model
• Outline

Advanced selectors

• Combinators
• Pseudo–classes
• Pseudo Elements

More about CSS

• Linking style sheets to a page
• Applying CSS
• CSS comments
• Background
• Overflow
• Float
• Opacity

The CSS outline properties allow you to define an outline area around an element’s box. An outline is a line that is drawn just outside the border edge of the elements. Outlines are generally used to indicate focus or active states of the elements such as buttons, links, form fields, etc.

Here, the dotted line is the border and the thick line is the outline.

Outlines vs Borders

An outline looks very similar to the border, but it differs from border in the following ways:

• Outlines do not take up space, because they are always placed on top of the box of the element which may cause them to overlap other elements on the page.
• Unlike borders, outlines won’t allow us to set each edge to a different width, or set different colors and styles for each edge. An outline is the same on all sides.
• Outlines do not have any impact on surrounding elements apart from overlapping.
• Unlike borders, outlines do not change the size or position of the element.
• Outlines may be non-rectangular, but you cannot create circular outlines.

Below are the available outline properties:

outline-style: It is used to set the appearance of the outline of an element ie., it tells us the style or type of outline. Any other outline property cannot be accessed without setting the outline-style. If absent then the default style will be set to none.

Syntax:

outline-style: auto|none|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

outline-color: It is used to sets the outline color of an element. The color can be set by its name ie., rgb value or a hex value, etc. If absent then the default color will be the current color.

Syntax: 

outline-color: <color> | invert | inherit;

outline-width: It is used to specify the width of this outline for a specific element. The width of the outline can be set by specifying the size of the width in px, cm, pt, etc, or by using terms like a thin, thick, medium. If absent then the default width will be the medium.

Syntax:

outline-width: medium|thin|thick|length|initial|inherit;

outline-offset: The CSS outline-offset Property sets the amount of space between an outline and the edge or border of an element. An outline is a line drawn around elements outside the border edge. The space between the element and its outline is transparent. Also, the outline may be non-rectangular. The default value is 0.

Syntax:

outline-offset: length|initial|inherit;

The Outline Shorthand Property

The outline CSS property is a shorthand property for setting one or more of the individual outline properties outline-style, outline-width and outline-color in a single rule.

Example:

p { 
  outline: 5px solid #ff00ff; 
}

If we want to remove the outline of an element:

p{
  outline:none;
}