Outline

In CSS, the outline property is used to create a visible border around an element, but it is different from the standard border.

Property in several ways:

Outline does not affect an element's layout:

outline property does not take up any space around the element.
It is drawn outside the border, so it won't push other elements away or change the element's size

Outlines are non-rectangular:

By default, outlines follow the shape of the element, including rounded corners.

Syntax:

selector {
outline: [outline-width] [outline-style] [outline-color];
}

outline-width: It indicates the outline, which can be specified in pixels, ems, rems, or other length units. It can also be set to thin, medium, thick, or auto.

outline-style: This indicates the style of the outline, similar to border styles. It can be dotted, dashed, solid, double, and other values.

outline-color: This sets the color of the outline. It can be specified as a named color, hexadecimal value, RGB, or HSL value.

Difference Between Border and Outline

FEATURES	BORDER	OUTLINE
Definition	Defines the width, style, and color of the border around an element.	Draws a line around an element, outside the border edge.
Affects Layout	Yes, it takes up space and affects the element's layout.	No, it does not take up space or affect the layout.
Position	Positioned within the element's box model.	Positioned outside the element's border.
Individual Side Control	Yes, can control each side separately (e.g., `border-top`).	No, applies to all sides equally.
Offset Property	No	Yes, `outline-offset` to control distance from the border.
Properties	`border-width`, `border-style`, `border-color`, `border-radius`, `border-top`, `border-right`, `border-bottom`, `border-left`	`outline-width`, `outline-style`, `outline-color`, `outline-offset`
Shorthand Property	border	outline

Example:

<!DOCTYPE html>
<html>
<style type="text/css">
    .box {
        background-color: #eee;
        border: 3px solid Lightgreen;
        padding: 5px 10px;
        outline-width: 3px;
        outline-style: solid;
        outline-color: red;
    }
</style>
<body>
<div class="box">Welcome to Quipo</div>
</body>

</html>

Output: