सीएसएस पॉडकास्ट - 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;
}
बॉर्डर वाली इमेज
आपको सीएसएस में सिर्फ़ स्ट्रोक-आधारित बॉर्डर का इस्तेमाल नहीं करना होगा.
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
वैल्यू, repeat वैल्यू जैसी ही होती है. हालांकि, ज़्यादा से ज़्यादा इमेज फ़िट करने के लिए, इमेज के किनारों को काटने के बजाय, इसे स्ट्रेच किया जाता है. साथ ही, इसे बार-बार इस्तेमाल करने के लिए, इसे दोहराया जाता हैspace
वैल्यू, repeat वैल्यू जैसी ही होती है, लेकिन यह वैल्यू हर किनारे के बीच स्पेस जोड़ती है, ताकि एक जैसा पैटर्न बनाया जा सके.
देखें कि आपको क्या समझ आया
सीमाओं के बारे में अपनी जानकारी को परखें
बॉर्डर का डिफ़ॉल्ट रंग क्या है?
white
historicColor
currentColor
black
.my-element { border: solid hotpink; }
बॉर्डर की डिफ़ॉल्ट चौड़ाई क्या होती है?
solid
medium
1px
border-inline: 1px solid
...