CSS Box Model

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:

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

css

selector {
    outline: width style color;
}

Example

css

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

html

<!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

html

<div>

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.

PreviousCSS Border NextCSS Width and Height