सीएसएस पॉडकास्ट - 016: बॉर्डर
बॉक्स मॉडल मॉड्यूल में, हमने बॉक्स मॉडल के हर सेक्शन के बारे में बताने के लिए फ़्रेम की तुलना को ध्यान में रखा है.
बॉर्डर बॉक्स आपके बॉक्स का फ़्रेम होता है. border
प्रॉपर्टी में, आपको अपनी ज़रूरत के हिसाब से किसी भी स्टाइल में फ़्रेम बनाने के कई विकल्प मिलते हैं.
बॉर्डर प्रॉपर्टी
अलग-अलग border
प्रॉपर्टी से बॉर्डर के अलग-अलग हिस्सों को एक स्टाइल में बनाया जा सकता है.
स्टाइल
बॉर्डर दिखाने के लिए, आपको border-style
तय करना होगा.
आप इनमें से कई विकल्प चुन सकते हैं:
ridge
, inset
, outset
, और groove
स्टाइल का इस्तेमाल करते समय, ब्राउज़र, दिखाए गए दूसरे रंग के लिए बॉर्डर के रंग को गहरा कर देगा. इससे कंट्रास्ट और गहराई मिलती है.
यह तरीका ब्राउज़र के हिसाब से अलग-अलग हो सकता है.
खास तौर पर, गहरे रंग, जैसे कि black
के लिए ऐसा हो सकता है.
Chrome में, ये बॉर्डर स्टाइल ठोस जैसी दिखेंगी और Firefox में,
उन्हें हल्का करके दूसरा गहरा रंग दिया जाएगा.
ब्राउज़र का व्यवहार अन्य बॉर्डर स्टाइल के लिए भी अलग-अलग हो सकता है.
इसलिए, अलग-अलग ब्राउज़र में अपनी साइट की जांच करना ज़रूरी है.
इस अंतर का एक सामान्य उदाहरण यह है कि हर ब्राउज़र dotted
और dashed
स्टाइल को कैसे रेंडर करता है.
बॉक्स के दोनों तरफ़ बॉर्डर स्टाइल सेट करने के लिए,
border-top-style
,
border-right-style
,
border-left-style
,
और border-bottom-style
का इस्तेमाल करें.
शॉर्टहैंड
margin
और padding
की तरह ही,
border
शॉर्टहैंड प्रॉपर्टी का इस्तेमाल करके, अपने बॉर्डर के सभी हिस्सों की जानकारी एक ही एलान में दी जा सकती है.
.my-element {
border: 1px solid red;
}
border
शॉर्टहैंड में वैल्यू का क्रम border-width
,
border-style
, और फिर border-color
है.
रंग
border-color
की मदद से, बॉक्स के दोनों तरफ़ या हर साइड पर रंग सेट किया जा सकता है.
डिफ़ॉल्ट रूप से, यह बॉक्स के टेक्स्ट के मौजूदा रंग का इस्तेमाल करता है: currentColor
.
इसका मतलब है कि अगर सिर्फ़ बॉर्डर प्रॉपर्टी के बारे में जानकारी दी जाती है, जैसे कि चौड़ाई, तो रंग के लिए इस्तेमाल की गई वैल्यू सिर्फ़ तब तक कैलकुलेट की जाएगी, जब तक कि आपने उसे साफ़ तौर पर सेट न कर दिया हो.
.my-element {
color: blue;
border: solid; /* Will be a blue border */
}
.my-element {
color: blue;
border: solid yellow;
}
अपने बॉक्स के दोनों तरफ़ बॉर्डर का रंग सेट करने के लिए,
border-top-color
,
border-right-color
,
border-left-color
, और
border-bottom-color
का इस्तेमाल करें.
चौड़ाई
बॉर्डर की चौड़ाई, लाइन की चौड़ाई के बराबर होती है. इसे border-width
से कंट्रोल किया जाता है.
बॉर्डर की डिफ़ॉल्ट चौड़ाई medium
है.
हालांकि, यह तब तक नहीं दिखेगा, जब तक कि कोई स्टाइल तय नहीं की जाती.
thin
और thick
जैसी चौड़ाई के नाम का इस्तेमाल किया जा सकता है.
border-width
प्रॉपर्टी, लंबाई की इकाई भी स्वीकार करती हैं, जैसे कि
px
, em
, rem
या %
.
अपने बॉक्स के दोनों तरफ़ बॉर्डर की चौड़ाई सेट करने के लिए,
border-top-width
,
border-right-width
,
border-left-width
, और
border-bottom-width
का इस्तेमाल करें.
लॉजिकल प्रॉपर्टी
लॉजिकल प्रॉपर्टी मॉड्यूल में आपको यह पता चला कि ऊपर, दाएं, सबसे नीचे या बाईं ओर के बजाय, ब्लॉक फ़्लो और इनलाइन फ़्लो को रेफ़र करने का तरीका क्या है.
आपके पास यह सुविधा बॉर्डर के साथ भी है:
.my-element {
border: 2px dotted;
border-inline-end: 2px solid red;
}
इस उदाहरण में, .my-element
के सभी किनारों को 2px
, बिंदुओं वाली बॉर्डर के तौर पर दिखाया गया है, जो मौजूदा टेक्स्ट रंग है.
फिर inline-end
बॉर्डर को 2px
के रूप में परिभाषित किया जाता है, जो ठोस और लाल होता है.
इसका मतलब है कि बाईं से दाईं ओर लिखी जाने वाली भाषाओं—जैसे कि अंग्रेज़ी— में बॉक्स के दाईं ओर लाल बॉर्डर होगा.
दाईं से बाईं ओर लिखी जाने वाली भाषाओं—जैसे अरबी में—लाल रंग का बॉर्डर बॉक्स के बाईं ओर दिखेगा.
बॉर्डर में लॉजिकल प्रॉपर्टी के लिए ब्राउज़र सपोर्ट अलग-अलग होता है. इसलिए, इसका इस्तेमाल करने से पहले यह पक्का कर लें कि सहायता उपलब्ध है या नहीं.
बॉर्डर की रेडियस
बॉक्स के कोनों को गोल आकार देने के लिए,
border-radius
प्रॉपर्टी का इस्तेमाल करें.
.my-element {
border-radius: 1em;
}
यह शॉर्टहैंड आपके बॉक्स के हर कोने में एक समान बॉर्डर जोड़ता है.
दूसरी बॉर्डर प्रॉपर्टी की तरह ही,
border-top-left-radius
,
border-top-right-radius
,
border-bottom-right-radius
, और
border-bottom-left-radius
के साथ, दोनों ओर की बॉर्डर का दायरा तय किया जा सकता है.
शॉर्टहैंड में हर कोने का दायरा भी तय किया जा सकता है, जो क्रम के मुताबिक होता है: सबसे ऊपर बाईं ओर, ऊपर दाईं ओर, नीचे दाईं ओर, फिर सबसे नीचे बाईं ओर.
.my-element {
border-radius: 1em 2em 3em 4em;
}
किसी कोने के लिए एक वैल्यू तय करके,
दूसरे शॉर्टहैंड का इस्तेमाल किया जा रहा है, क्योंकि बॉर्डर की रेडियस को दो हिस्सों में बांटा जाता है: वर्टिकल और हॉरिज़ॉन्टल.
इसका मतलब है कि border-top-left-radius: 1em
सेट करने पर, सबसे ऊपर बाईं ओर सबसे ऊपर का दायरा और सबसे ऊपर बाईं ओर बायां दायरा सेट किया जाता है.
इस तरह हर कोने में, दोनों प्रॉपर्टी तय की जा सकती हैं:
.my-element {
border-top-left-radius: 1em 2em;
}
इससे 1em
की border-top-left-top
वैल्यू और 2em
की border-top-left-left
वैल्यू जुड़ जाती है.
यह ऊपरी बाएं बॉर्डर की त्रिज्या को डिफ़ॉल्ट गोल त्रिज्या के बजाय, अंडाकार त्रिज्या में बदल देता है.
आप इन वैल्यू को border-radius
शॉर्टहैंड में तय कर सकते हैं.
इसके लिए, स्टैंडर्ड वैल्यू के बाद दीर्घवृत्तीय वैल्यू के लिए, /
का इस्तेमाल किया जा सकता है.
इससे आपको क्रिएटिव बनने और कुछ जटिल आकार बनाने में मदद मिलती है.
.my-element {
border: 2px solid;
border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
}
बॉर्डर इमेज
आपको CSS में बस स्ट्रोक-आधारित बॉर्डर का उपयोग करने की ज़रूरत नहीं है.
border-image
का इस्तेमाल करके, किसी भी तरह की इमेज का इस्तेमाल किया जा सकता है.
इस शॉर्टहैंड प्रॉपर्टी की मदद से, सोर्स इमेज, इमेज की चौड़ाई, और बॉर्डर को किनारे से कितनी दूर तक लगाया जा सकता है, और इसे कैसे दोहराया जाना चाहिए, यह सेट करने में मदद मिलती है.
.my-element {
border-image-source: url(https://assets.codepen.io/174183/border-image-frame.jpg);
border-image-slice: 61 58 51 48;
border-image-width: 20px 20px 20px 20px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch stretch;
}
border-image-width
प्रॉपर्टी, border-width
की तरह होती है: इसी तरह, बॉर्डर इमेज की चौड़ाई को सेट किया जाता है.
border-image-outset
प्रॉपर्टी की मदद से, बॉर्डर इमेज और उसके चारों तरफ़ रैप होने वाले बॉक्स के बीच की दूरी सेट की जा सकती है.
border-image-source
किसी भी मान्य इमेज के लिए, border-image-source
(बॉर्डर इमेज का सोर्स) url
हो सकता है. इसमें सीएसएस ग्रेडिएंट शामिल हैं.
.my-element {
border-image-source: url('path/to/image.png');
}
.my-element {
border-image-source: linear-gradient(to bottom, #000, #fff);
}
border-image-slice
border-image-slice
प्रॉपर्टी एक ऐसी फ़ायदेमंद प्रॉपर्टी है जिसकी मदद से, किसी इमेज को नौ हिस्सों में बांटा जा सकता है. इसमें, स्प्लिट की चार लाइनों को शामिल करना होता है.
यह margin
की शॉर्टहैंड की तरह काम करता है, जहां टॉप, राइट, बॉटम, और बाएं ऑफ़सेट वैल्यू तय की जाती है.
.my-element {
border-image: url('image.jpg');
border-image-slice: 61 58 51 48;
}
ऑफ़सेट वैल्यू से तय होने के बाद,
अब आपके पास इमेज के नौ सेक्शन होंगे: चार कोने, चार किनारे, और बीच का एक सेक्शन.
कोने, बॉर्डर इमेज वाले एलिमेंट के कोनों पर लागू किए जाते हैं.
किनारों को उस एलिमेंट के किनारों पर लागू किया जाता है.
border-image-repeat
प्रॉपर्टी से यह तय होता है कि वे किनारे किस तरह जगह को भरते हैं. साथ ही, border-image-width
प्रॉपर्टी, स्लाइस के साइज़ को कंट्रोल करती है.
आखिर में, fill
कीवर्ड यह तय करता है कि स्लाइसिंग के ज़रिए छोड़े गए बीच वाले सेक्शन का इस्तेमाल, एलिमेंट की बैकग्राउंड इमेज के तौर पर किया जाएगा या नहीं.
border-image-repeat
border-image-repeat
की मदद से, सीएसएस को यह निर्देश दिया जाता है कि बॉर्डर इमेज को किस तरह दोहराया जाए.
यह background-repeat
की तरह काम करता है.
- इसकी शुरुआती वैल्यू
stretch
है, जो उपलब्ध जगह को भरने के लिए जहां मुमकिन हो वहां सोर्स इमेज को स्ट्रेच करती है. repeat
वैल्यू, सोर्स इमेज के किनारों को ज़्यादा से ज़्यादा बार टाइल करती है. यह वैल्यू पाने के लिए, किनारों को क्लिप कर सकती है.round
की वैल्यू दोहराने के समान ही है. हालांकि, इमेज के किनारे वाले हिस्सों को ज़्यादा से ज़्यादा फ़िट करने के लिए, उन्हें क्लिप करने के बजाय, यह इमेज को स्ट्रेच करने के साथ-साथ उसे दोहराता भी है, ताकि उसे दोहराया जा सकेspace
वैल्यू फिर से दोहराने की तरह है, लेकिन यह वैल्यू हर किनारे वाले क्षेत्र के बीच स्पेस जोड़ती है, ताकि बिना किसी रुकावट के पैटर्न बनाया जा सके.
आपने जो सीखा है उसकी जांच करें
सीमाओं को लेकर अपनी जानकारी को परखें
डिफ़ॉल्ट बॉर्डर रंग कौन सा है?
black
white
currentColor
text-color
वैल्यू को दिखाएगी और बॉर्डर का डिफ़ॉल्ट कलर होगी.historicColor
.my-element { border: solid hotpink; }
बॉर्डर की डिफ़ॉल्ट चौड़ाई क्या होती है?
1px
medium
solid
border-style
वैल्यू है, न कि border-width
वैल्यू.border-inline: 1px solid
करेगा...
border-block
सबसे ऊपर और सबसे नीचे होगा.