CSS Outline

Outline एक लाइन होती है जो element के border के बाहर बनती है। यह किसी element को highlight या focus दिखाने के लिए प्रयोग की जाती है, लेकिन यह layout को affect नहीं करती (यानि margin या size नहीं बदलती)।

Outline क्या है?

Outline एक non-box effect होती है जो border के बाहर दिखाई देती है। Border के विपरीत, यह element के आकार को नहीं बढ़ाती। इसे अक्सर accessibility और form elements (जैसे input focus) में यूज़ किया जाता है।

Syntax (Syntax बहुत simple है)

outline: <outline-width> <outline-style> <outline-color>;

Example:

p {
  outline: 3px solid red;
}

Example – Basic Outline

<style>
p {
  border: 2px solid blue;
  outline: 3px solid red;
}
</style>

<p>यह एक पैराग्राफ है जिस पर outline लगाई गई है।</p>

Output में आप देखेंगे: नीली border text के चारों ओर है। लाल outline border के बाहर है।

Outline vs Border में अंतर

Feature	Border	Outline
स्थिति (Position)	Element के अंदर की boundary	Border के बाहर
Layout पर असर	Width/height बढ़ा सकता है	कोई असर नहीं
Individual sides?	हाँ (top, right, bottom, left)	❌ नहीं, केवल पूरी outline एक साथ
Rounded corner support	हाँ (border-radius)	❌ नहीं
Common use	Box styling	Highlight या focus दिखाने के लिए

Outline की Properties

outline-style Outline की स्टाइल सेट करती है।

outline-style: solid;   /* Default */
outline-style: dashed;
outline-style: dotted;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;

outline-color Outline का रंग तय करती है।

outline-color: red;
outline-color: #00ff00;
outline-color: rgb(0,0,255);
outline-color: invert;   /* Background के contrast में अपने आप बदल जाती है */

outline-width Outline की मोटाई तय करती है।

outline-width: thin;
outline-width: medium;
outline-width: thick;
outline-width: 5px;

outline-offset

यह property border और outline के बीच की space तय करती है।

outline-offset: 10px;

Example:

div {
  border: 2px solid blue;
  outline: 3px solid red;
  outline-offset: 5px;
}

अब outline border से थोड़ी दूरी पर दिखेगी।

Example – Outline Offset Demo

<style>
.demo {
  background: lightyellow;
  border: 2px solid orange;
  outline: 3px solid red;
  outline-offset: 8px;
  padding: 10px;
  width: 200px;
}
</style>

<div class="demo">Outline Offset Example</div>

Output में border और outline के बीच clear gap दिखेगा।

Example – Focus Outline (Forms में Common Use)

जब कोई user किसी input box पर click करता है तो browser अपने आप outline जोड़ देता है ताकि user को पता चले कि focus कहाँ है।

<style>
input:focus {
  outline: 3px solid blue;
  outline-offset: 3px;
}
</style>

<input type="text" placeholder="नाम लिखें...">

Accessibility और UX के लिए यह बहुत ज़रूरी है।

Shortcut Property

आप outline की सारी values एक साथ भी लिख सकते हैं

outline: 3px dashed green;

Equivalent to:

outline-width: 3px;
outline-style: dashed;
outline-color: green;

Practical Example – Highlight Selected Box

<style>
.box {
  width: 200px;
  height: 100px;
  background: lightgray;
  border: 2px solid black;
  transition: 0.3s;
}

.box:hover {
  outline: 4px solid limegreen;
  outline-offset: 5px;
}
</style>
<div class="box">Hover me!</div>

जब आप box पर hover करेंगे, outline दिखेगी — perfect for hover effects!

Quick Recap

CSS Outline Properties (आउटलाइन प्रॉपर्टीज़)
Property (प्रॉपर्टी)	Description (विवरण)
outline-style	Outline की स्टाइल तय करता है (जैसे: dotted, dashed, solid, etc.)
outline-color	Outline का रंग तय करता है
outline-width	Outline की मोटाई तय करता है
outline-offset	Border और outline के बीच का space (दूरी) तय करता है
outline	यह एक शॉर्टहैंड property है जो एक ही डिक्लेरेशन में स्टाइल, रंग, और मोटाई को सेट कर सकता है

Common Mistakes

❌ Border और outline को mix करना
✅ याद रखें — outline हमेशा border के बाहर होती है
❌ Outline radius लगाना
✅ Border-radius outline पर काम नहीं करता
❌ Outline remove करके accessibility खराब करना
✅ Focus के लिए हमेशा कोई visual indication रखें

Pro Tips

Hover और focus दोनों में outline प्रयोग करें
Custom focus styles बनाते समय colors accessible रखें
अगर outline नहीं चाहिए तो use करें:

outline: none;

लेकिन तब alternative focus style देना न भूलें!

Final Thoughts

Outline एक visual highlight tool है — यह elements को focus या hover state में standout बनाता है और accessibility-friendly design के लिए बहुत ज़रूरी है।

Property (प्रॉपर्टी)	Description (विवरण)
outline-style	Outline की स्टाइल तय करता है (जैसे: dotted, dashed, solid, etc.)
outline-color	Outline का रंग तय करता है
outline-width	Outline की मोटाई तय करता है
outline-offset	Border और outline के बीच का space (दूरी) तय करता है
outline	यह एक शॉर्टहैंड property है जो एक ही डिक्लेरेशन में स्टाइल, रंग, और मोटाई को सेट कर सकता है