Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

CSS Box Model

CSS Outline

Written by Updated

Draw non-layout outlines for focus and emphasis, control their offset, and preserve accessible keyboard focus indicators.

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

PropertyDescriptionExample
outlineSets all outline propertiesoutline: 2px solid black;
outline-widthSets thickness of outlineoutline-width: 3px;
outline-styleDefines outline styleoutline-style: dashed;
outline-colorSets outline coloroutline-color: red;
outline-offsetAdds space between border and outlineoutline-offset: 5px;

Outlines and keyboard focus

Outlines are drawn outside the border edge and do not change layout dimensions. That makes them suitable for focus indicators, especially when paired with outline-offset. Avoid removing the browser outline unless the replacement is at least as visible across light, dark, and forced-color modes. Unlike borders, an outline does not support independently styled sides and may follow a non-rectangular border radius differently between browsers. The supporting concepts are explained in CSS Border and Accessible CSS.

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>

Browser Support

Feature
Chrome
Edge
Firefox
Safari
outline-style11211.2

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.

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 BorderNextCSS Width and Height