Outline Properties

In CSS, the outline property is used to add an outline or border around an element. The outline property is often used to highlight an element.

Outline property components:

Outline-width
Outline-color
Outline-style

Outline-width:

This component sets the width of the outline. You can specify it using a length value (e.g., pixels) or use predefined keywords like thin, medium, thick, or auto.

Outline-color:

This component sets the color of the outline. You can specify it using color names (e.g., red, blue), hexadecimal color codes (e.g., #FF0000), RGB or RGBA values, or HSL or HSLA values.

Outline-style:

This component sets the style of the outline. It can take dotted, dashed, solid, double, groove, ridge, inset, outset, or none. These values define the pattern of the outline.

Example:

<!DOCTYPE html>
<html>
<style type="text/css">
    .box {
        outline-color: red;
        outline-width: 4px;
        margin: 10px;
        float: left;
        border: 2px solid lightgreen;
        padding: 5px 10px;
    }
</style>
<body>
<div class="box" style="outline-style: dashed;">This is dashed outline.</div>
<div class="box" style="outline-style: dotted;">This is dotted outline.</div>
<div class="box" style="outline-style: double;">This is double outline.</div>
<div class="box" style="outline-style: groove;">This is groove outline.</div>
<div class="box" style="outline-style: inset;">This is inset outline.</div>
<div class="box" style="outline-style: outset;">This is outset outline.</div>
<div class="box" style="outline-style: ridge;">This is ridge outline.</div>
<div class="box" style="outline-style: solid;">This is solid outline.</div>
</body>

</html>

Output:

Outline offset:

The outline-offset property in CSS allows you to control the space between an element's outline and its border.
It is useful to create some spacing between the outline and the element's border to achieve a specific visual effect.

Syntax:

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

outline sets the width, style, and color of the outline, as described in the previous response.
outline-offset specifies the spacing between the outline and the element's border. You can set it using a length value (e.g., pixels, ems) or use keywords like auto.

Example:

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

Output: