A line outside the border that takes no space.
✍️ 3 exercises + code challenge in this lessonAn outline is drawn outside the border. Unlike borders, outlines do not take up space and do not change the layout.
outline: 3px solid orange;outline-offset adds space between the border and the outline.outline: none, provide another visible focus style.Mastering CSS Outline helps you write clean and reliable CSS code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.
<style>
p { border: 2px solid #071A2F; padding: 8px; }
.o { outline: 3px dashed #E34F26; outline-offset: 6px; }
input:focus { outline: 3px solid #14B8A6; }
</style>
<p class="o">Outline with offset</p>
<input placeholder="Click to see the focus outline">Check what you learned in “CSS Outline”.
Add space between the border and the outline.
a:focus {
outline: 2px solid orange;
: 4px;
}
How is an outline different from a border?
Give the input a 3px solid outline.
Free sign-in required · Google login available
Stuck on something?
Ask the community in the CodesInTech forum.
Need a developer?
Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.
Explore Our Services