CSS Outline
In this page:
selector {
outline: width style color;
outline-offset: length;
}outline-style
outline-style किसी outline का line pattern set करता है, जैसे solid, dashed, या dotted, बिल्कुल border-style जैसे ही style keywords follow करते हुए। border के उलट, outline element के box size या layout को कभी असर नहीं करता, क्योंकि यह box के पूरी तरह बाहर draw होता है।
- solid सबसे common outline style है, खासतौर पर custom focus indicators के लिए।
- Accepted values:
- none — कोई outline नहीं (initial value)
- auto — browser की default focus-ring style
- solid — एक continuous line
- dashed — dashes की एक series
- dotted — dots की एक series
- double — दो parallel lines
- groove / ridge / inset / outset — 3D looks
- hidden outline-style के लिए allowed नहीं है
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: outline-style
<style>
.box {
outline-style: dashed;
}
</style>
<div class="box">Outline never affects layout size</div>outline-width और outline-color
outline-width तय करता है कि outline कितना मोटा है, और outline-color उसका color set करता है, ठीक border-width और border-color जैसे काम करते हुए लेकिन separate outline layer के लिए। इन्हें सबसे ज़्यादा किसी site की branding से match करने के लिए focus outline को customize करने में इस्तेमाल किया जाता है, browser default के बजाय।
- outline-width को इतना visible रखें कि नोटिस हो, कम से कम 2px, क्योंकि एक focus ring सिर्फ तभी काम का है जब वह देखने में आसान हो।
- Accepted values:
- length — जैसे 2px (outline-width)
- thin / medium / thick — width keywords, medium initial value है
- कोई भी color — outline-color के लिए
- invert — limited support वाली legacy value
- outline shorthand — width, style और color किसी भी order में हो सकती हैं
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: outline-width and outline-color
<style>
button:focus {
outline-style: solid;
outline-width: 3px;
outline-color: orange;
}
</style>
<button>Tab to me</button>outline-offset
outline-offset element के edge और उसके outline के बीच space जोड़ता है, element के अपने size या layout को बदले बिना outline को और बाहर धकेलते हुए। यह तब उपयोगी है जब आप बाकी box के बारे में कुछ बदले बिना किसी element और उसके focus ring के बीच visible separation चाहते हैं।
- एक छोटा positive outline-offset, जैसे 2px से 4px, अक्सर focus ring को element के अपने border से थोड़ा अलग करके साफ़ बनाता है।
- Accepted values:
- length — जैसे 4px, border edge से spacing
- 0 — outline border edge को छूता है (initial value)
- negative length — outline को border edge के अंदर draw करता है
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: outline-offset
<style>
button:focus {
outline: 2px solid blue;
outline-offset: 4px;
}
</style>
<button>Focus ring pushed outward</button>Shorthand outline Property
border की तरह ही, outline के पास एक shorthand property है जो width, style, और color को एक declaration में combine करती है। 'outline: none' से outlines को पूरी तरह हटाना एक common accessibility mistake है, क्योंकि यह keyboard users से visible focus feedback छीन लेता है।
- shorthand focus-state CSS को छोटा और readable रखता है, खासतौर पर किसी :focus selector पर इसे define करते समय।
- Accepted values:
- outline-width — thin, medium, thick या एक length
- outline-style — border-style जैसी ही values, hidden को छोड़कर
- outline-color — कोई भी color value
- values किसी भी order में आ सकती हैं
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: Shorthand outline Property
<style>
a:focus {
outline: 2px solid orange;
}
</style>
<a href="#">Width, style, color in one line</a>Outline बनाम Border: मुख्य अंतर
Border box model का हिस्सा है और element के layout size में जुड़ता है (जब तक box-sizing: border-box इस्तेमाल न हो); outline पूरी तरह box model के बाहर बैठता है और layout को कभी असर नहीं करता, यहाँ तक कि जब यह visually आस-पास के content से overlap करे।
उदाहरण: Outline vs Border: Key Differences
<style>
.bordered {
border: 4px solid black;
}
.outlined {
outline: 4px solid black;
}
</style>
<div class="bordered">Border adds to layout size</div>
<div class="outlined">Outline never affects layout, even overlapping</div>- design को 'साफ़' करने के लिए outline: none set करना बिना कोई दूसरा visible focus indicator दिए, keyboard accessibility तोड़ते हुए।
- यह उम्मीद करना कि outline element के layout size को border जैसे असर करेगा, यह नहीं करता, क्योंकि यह पूरी तरह box के बाहर draw होता है।
- outline-offset के मौजूद होने की बात भूल जाना, जो अक्सर किसी focus ring के आस-पास spacing के लिए border से जूझने से बेहतर fix होता है।
- Outline किसी element के चारों ओर एक line draw करता है लेकिन border के उलट उसके layout size को कभी असर नहीं करता।
- outline-offset किसी element के edge और उसके outline के बीच space जोड़ता है।
- Outlines accessibility के लिए ज़रूरी हैं, क्योंकि browsers keyboard focus दिखाने के लिए इनका इस्तेमाल करते हैं; इन्हें बदले बिना कभी न हटाएँ।
यहाँ बताई गई सभी standard CSS outline properties हर modern browser में supported हैं।
Chapter Quiz — Complete all 22 topics to unlock
0/22 topics done
Complete these topics first:
- CSS Combinators
- CSS Pseudo-classes
- CSS Pseudo-elements
- CSS Opacity
- CSS Navigation Bar
- CSS Vertical Navbar
- CSS Horizontal Navbar
- CSS Dropdowns
- CSS Advanced Dropdowns
- CSS Image Gallery
- CSS Image Sprites
- CSS Attribute Selectors
- CSS Forms
- CSS Counters
- CSS Specificity
- CSS Specificity Hierarchy
- CSS Variables
- CSS !important
- CSS Box Sizing
- CSS Media Queries
- CSS Pointer Events
- CSS Outline