Prev Next

CSS Outline

An outline is a line drawn around an element, outside its border. Unlike borders, outlines do not affect layout and can be used to highlight elements without shifting other content. Outlines are often used for focus indicators or debugging, making it easy to see element boundaries.

Key Topics

Basic Outline

Use outline to set color, style, and width. For example, outline: 2px dashed blue; draws a dashed blue line around the element, outside the border.

<!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>
        .outlined {
            outline: 2px dashed blue;
            padding: 20px;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <div class="outlined">
        <h2>Element with Outline</h2>
        <p>The outline sits outside the border, not affecting layout.</p>
    </div>
</body>
</html>

Explanation: The dashed blue line highlights the element’s area without altering spacing or pushing other elements around.

No Layout Impact

Outlines do not take up space. Removing or adding an outline won’t shift the position of other elements, making them ideal for temporary visual guides or focus states.

Key Takeaways

  • Highlighting: Use outlines to draw attention without changing layout.
  • Focus Indicators: Commonly used to show which element is focused, aiding accessibility.
  • Debugging: Helps visualize element boundaries while developing.
Prev Next