Home 〉 CSS Tutorials 〉 CSS Outline Tutorial: Learn outline, outline-color, offset & style Guide
CSS Outline Tutorial: Learn outline, outline-color, offset & style Guide !
CSS Outline Tutorial: Learn outline, outline-color, offset & style Guide !
What's the difference between a border and an outline in CSS?
The `outline` property lets you highlight elements (like buttons and inputs) without affecting the layout. Learn how to control outline color, width, style, and even the space between the element and the outline with `outline-offset`. This is especially useful for accessibility and focus indicators. Here is the blog post on CSS Outline Property.
CSS Outline Tutorial - Everything You Need to Know with Examples
The 'outline' property in CSS lets you draw a line around an element — outside the border — without affecting the element's size or layout. It's often used for accessibility, focus styles, and visual highlights.
In this tutorial, you'll learn how to use 'outline', 'outline-color', 'outline-style', 'outline-width', and 'outline-offset' with real examples.
What is CSS Outline?
A CSS outline is a line drawn around an element, outside the border. It doesn't take up space in the layout (unlike margins or borders).
1. Basic Outline Syntax
Syntax ✍
outline: <outline-width> <outline-style> <outline-color>;
All parts are optional, and the order doesn't matter.
2. 'outline' vs 'border'
| Feature | Border | Outline |
|---|---|---|
| Affects layout | Yes (adds to size) | No (drawn outside) |
| Individual sides? | Yes | No (applies to all) |
| Offset possible? | No | Yes ('outline-offset') |
Example 1: Basic Outline
Code 📝 
<!DOCTYPE html>
<html>
<head>
<style>
.outline-box {
padding: 20px;
outline: 2px solid red;
}
</style>
</head>
<body>
<div class="outline-box">This box has a red outline.</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Adds a 2px solid red line outside the element.
3. 'outline-style': Line Type
Possible values:
- 'solid'
- 'dashed'
- 'dotted'
- 'double'
- 'groove'
- 'none'
Example 📄
outline-style: dashed;
Example 2: Outline with Color and Style
Code 📝
<!DOCTYPE html>
<html>
<head>
<style>
.styled-outline {
outline-width: 3px;
outline-style: dashed;
outline-color: blue;
}
</style>
</head>
<body>
<p class="styled-outline">Dashed blue outline.</p>
</body>
</html>
output 📌
Dashed blue outline.
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Sets custom width, style, and color for the outline.
4. 'outline-offset': Space Between Border and Outline
The 'outline-offset' property creates space between the outline and the edge of the element.
Example 📄
outline-offset: 5px;
Example 3: Using 'outline-offset'
Code 📝
<!DOCTYPE html>
<html>
<head>
<style>
.offset-box {
border: 2px solid gray;
outline: 3px solid green;
outline-offset: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="offset-box">Outline is offset from the border.</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
The green outline is drawn 10px away from the border.
5. Shorthand: 'outline' in One Line
Example 📄
outline: 4px dotted orange;
This is equal to:
- outline-width: 4px;
- outline-style: dotted;
- outline-color: orange;
Example 4: Outline on Focus (Accessibility)
Code 📝
<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
outline: 2px solid #007BFF;
}
</style>
</head>
<body>
<input type="text" placeholder="Focus me">
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
- Outlines are often used to show focus on input fields.
- Helps users who navigate with the keyboard.
Quick Reference: Common Values
| Property | Example Value |
|---|---|
| 'outline-style' | 'solid', 'dashed' |
| 'outline-color' | 'red', '#333', 'rgba()' |
| 'outline-width' | '2px', 'thick' |
| 'outline-offset' | '5px', '10px' |
Conclusion
CSS 'outline' is a powerful but underused property. It's perfect for focus states, highlights, and accessible interfaces. Unlike borders, outlines don't affect layout, making them ideal for clean, lightweight UI elements.
Experiment with different colors, styles, and offsets to match your design and accessibility needs.
Suggested Posts:
- HTML div and span Tag Explained with Examples - Complete Guide
- HTML Paragraph Tag Tutorial with Examples | HTML '<p>' Tag Explained
- HTML input Tag - Types, Attributes, Syntax, and Examples
- CSS Padding Explained with Examples | CSS Box Model Guide
- CSS Pseudo-Classes Explained with Examples | Complete Guide for Beginners
Related Topics:
Frequently Asked Questions (FAQs)
What's the difference between outline and border in CSS?
An outline does not affect element size and applies to all sides equally. A border adds to the layout and can be set on individual sides.
Can I animate an outline?
Yes, using 'transition', though results may vary across browsers.
Why is outline used for input focus?
Browsers use outlines to indicate keyboard focus. It's essential for accessibility.
How do I remove the default outline?
Use 'outline: none;', but make sure to provide another visual indicator for focus.