A CSS outline is a line drawn outside an element's border edge. Unlike borders, outlines do not take up layout space, making them ideal for accessibility focus indicators and debugging element boundaries.
The outline property shorthand accepts width, style, and color values:
.box {
border: 2px solid #334155;
outline: 3px solid #38bdf8;
outline-offset: 4px; /* Space between border and outline */
}
Key distinctions:
outline-offset: Creates visible spacing between an element's border and its outline line.:focus-visible) when navigating via keyboard.flowchart TD
A["Element Box (Content + Padding + Border)"] --> B["outline-offset Space"]
B --> C["OUTLINE Line (Drawn on top of layout)"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Outline Demonstration</title>
<style>
.custom-input {
background-color: #1e293b;
color: #f8fafc;
border: 1px solid #334155;
padding: 10px 14px;
border-radius: 6px;
outline: none;
}
/* Custom focus outline for keyboard accessibility */
.custom-input:focus-visible {
outline: 2px solid #38bdf8;
outline-offset: 2px;
}
</style>
</head>
<body style="background-color: #0f172a; color: #f8fafc; font-family: system-ui, sans-serif; padding: 2rem;">
<h2>Accessible Focus Outline</h2>
<label for="email" style="display: block; margin-bottom: 0.5rem;">Email Address:</label>
<input type="email" id="email" class="custom-input" placeholder="Click or Tab here to see outline">
</body>
</html>
outline: none) without providing custom focus styles: Removing focus outlines breaks keyboard navigation accessibility for visually impaired users.:focus-visible instead of :focus: Shows focus outlines only when navigating via keyboard, preventing focus rings from appearing on mouse clicks.outline-offset for clean focus rings: Adding 2px or 4px offset creates a modern ring floating around buttons and input controls.Create a CSS rule for .btn:focus-visible that applies outline: 2px solid #38bdf8; and outline-offset: 3px;!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.