Tutorial Article

CSS Outline

The CSS Outline property is used to draw a line outside an element’s border. It is similar to a border, but with some key differences: 👉 This adds a 2px red outline outside the element. Attributes Property Description Example outline Sets all outline properties outline: 2px solid black; outline-width Sets thickness of outline outline-width: 3px; […]

Apr 2, 2026CSSCSS Box ModelTutorials

The CSS Outline property is used to draw a line outside an element’s border.

It is similar to a border, but with some key differences:

It does not take up space (does not affect layout)
It appears outside the border
It is often used for highlighting elements, especially for focus states

Syntax

selector {
    outline: width style color;
}

Example

p {
    outline: 2px solid red;
}

👉 This adds a 2px red outline outside the element.

Attributes

Property	Description	Example
outline	Sets all outline properties	outline: 2px solid black;
outline-width	Sets thickness of outline	outline-width: 3px;
outline-style	Defines outline style	outline-style: dashed;
outline-color	Sets outline color	outline-color: red;
outline-offset	Adds space between border and outline	outline-offset: 5px;

Example

Complete CSS Outline Example

<!DOCTYPE html>
<html>
<head>
    <title>CSS Outline Example</title>
    <style>
        div {
            border: 2px solid blue;
            outline: 3px dashed red;
            outline-offset: 5px;
            padding: 10px;
        }

        p {
            outline: 2px solid green;
        }
    </style>
</head>
<body>

    <div>This div has both border and outline.</div>

    <p>This paragraph has an outline.</p>

</body>
</html>

Output

Browser Output

The <div> will have:
A blue border
A red dashed outline outside the border
The <p> will have a green outline
The outline will not affect spacing between elements

Browser Support

Chrome	Firefox	Edge	Safari	Opera	IE9+
✅Yes	✅Yes	✅Yes	✅Yes	✅Yes	✅Yes

Notes

Outline does not take up space (unlike border)
It is drawn outside the border
Commonly used for focus effects (e.g., input fields)
Supports outline-offset for spacing
Cannot apply different outlines to each side

Conclusion

CSS Outline is a useful property for highlighting elements without affecting layout. It is especially helpful for accessibility and focus styling, making it an important part of modern web design.