Outline in CSS

The outline in CSS is a line that is drawn around an element, outside the border, to make the element stand out. It differs from the border in that it does not take up space and can have different properties such as color, style, and width.

CSS Outline Properties

  1. outline-color: Specifies the color of the outline.
  2. outline-style: Specifies the style of the outline (solid, dashed, dotted, etc.).
  3. outline-width: Specifies the width of the outline.
  4. outline: A shorthand property for setting the above three properties.

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        .box {
            width: 200px;
            height: 100px;
            padding: 20px;
            border: 5px solid black;
            margin: 10px;
            background-color: lightblue;
            outline: 3px dashed red; /* Outline shorthand */
        }
    </style>
</head>
<body>
    <div class="box">
        This box has an outline.
    </div>
</body>
</html>


outline-color

Specifies the color of the outline.

<style>
.box-outline-color {
    outline-color: red;
    outline-width: 5px;
outline-style: dashed;
}
</style>
<div class="box-outline-color">
    This box has a red outline.
</div>


outline-style

Specifies the style of the outline. Possible values include none, solid, dashed, dotted, double, groove, ridge, inset, and outset.

<style>
.box-outline-style {
    outline-style: dashed;
}
</style>
<div class="box-outline-style">
    This box has a dashed outline.
</div>


outline-width

Specifies the width of the outline. Possible values include a length (e.g., 1px, 2em), or keywords like thin, medium, and thick.

<style>
.box-outline-width {
    outline-width: 5px;
outline-style: dashed;
outline-color: red;
}
</style>
<div class="box-outline-width">
    This box has a 5px wide outline.
</div>


outline (shorthand)

A shorthand property for setting outline-color, outline-style, and outline-width in one declaration.

<style>
.box-outline-shorthand {
    outline: 3px solid green; /* Width, style, and color */
}
</style>
<div class="box-outline-shorthand">
    This box has a green solid outline with a width of 3px.
</div>


Combined Example

<!DOCTYPE html>
<html>
<head>
    <style>
        .box-outline-color {
            outline-color: red;
            outline-style: solid;
            outline-width: 3px;
        }
        
        .box-outline-style {
            outline-color: black;
            outline-style: dashed;
            outline-width: 3px;
        }

        .box-outline-width {
            outline-color: blue;
            outline-style: solid;
            outline-width: 5px;
        }

        .box-outline-shorthand {
            outline: 3px solid green; /* Width, style, and color */
        }

        .box {
            width: 200px;
            height: 100px;
            padding: 20px;
            margin: 10px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="box box-outline-color">
        This box has a red solid outline.
    </div>
    <div class="box box-outline-style">
        This box has a black dashed outline.
    </div>
    <div class="box box-outline-width">
        This box has a blue solid outline with a width of 5px.
    </div>
    <div class="box box-outline-shorthand">
        This box has a green solid outline with a width of 3px.
    </div>
</body>
</html>