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.

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: