CSS Outline

CSS outline is a shorthand property that sets the outline around an element, which can be useful for accessibility or design purposes. Unlike borders, outlines do not affect the element's layout or occupy space. They’re drawn outside the element’s border edge.

Properties of `outline`

outline-color: Sets the color of the outline.
outline-style: Defines the style of the outline (e.g., solid, dashed, dotted).
outline-width: Specifies the thickness of the outline.

You can also use the outline shorthand property to set all three properties at once.

Example Usage

Basic Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Outline Example</title>
    <style>
        .outline-example {
            margin: 20px;
            padding: 20px;
            border: 2px solid black;
            outline: 4px dashed red;
        }
    </style>
</head>
<body>
    <div class="outline-example">This element has an outline.</div>
</body>
</html>

In this example, the .outline-example class applies a 4px wide, dashed, red outline around the element. The outline is drawn outside the border of the element, which does not affect its size or layout.

Outline with Different Properties

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Outline Properties Example</title>
    <style>
        .outline-different {
            margin: 20px;
            padding: 20px;
            border: 2px solid black;
            outline-color: blue;
            outline-style: dotted;
            outline-width: 3px;
        }
    </style>
</head>
<body>
    <div class="outline-different">This element has a blue dotted outline.</div>
</body>
</html>

In this example, different properties are set individually. The outline-color is blue, outline-style is dotted, and outline-width is 3px.

Notes

Outline vs. Border: The outline is drawn outside the border, and it does not affect the layout. It’s useful for indicating focus (e.g., for keyboard navigation) or for temporary visual effects.
Outline Offset: You can use the outline-offset property to adjust the position of the outline relative to the element.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Outline Offset Example</title>
    <style>
        .outline-offset-example {
            margin: 20px;
            padding: 20px;
            border: 2px solid black;
            outline: 4px solid green;
            outline-offset: 10px;
        }
    </style>
</head>
<body>
    <div class="outline-offset-example">This element has an outline with offset.</div>
</body>
</html>

In this case, the outline-offset property moves the outline 10px away from the element’s border.

These examples should help you understand and use CSS outlines effectively!

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.