सीमाएं

सीएसएस पॉडकास्ट - 016: बॉर्डर

बॉक्स मॉडल मॉड्यूल में, हमने बॉक्स मॉडल के हर सेक्शन के बारे में बताने के लिए फ़्रेम की तुलना को ध्यान में रखा है.

बॉर्डर बॉक्स आपके बॉक्स का फ़्रेम होता है. border प्रॉपर्टी में, आपको अपनी ज़रूरत के हिसाब से किसी भी स्टाइल में फ़्रेम बनाने के कई विकल्प मिलते हैं.

बॉर्डर प्रॉपर्टी

अलग-अलग border प्रॉपर्टी से बॉर्डर के अलग-अलग हिस्सों को एक स्टाइल में बनाया जा सकता है.

ब्राउज़र सहायता

• 1
• 12
• 1
• 1

सोर्स

स्टाइल

बॉर्डर दिखाने के लिए, आपको border-style तय करना होगा. आप इनमें से कई विकल्प चुन सकते हैं:

ridge, inset, outset, और groove स्टाइल का इस्तेमाल करते समय, ब्राउज़र, दिखाए गए दूसरे रंग के लिए बॉर्डर के रंग को गहरा कर देगा. इससे कंट्रास्ट और गहराई मिलती है. यह तरीका ब्राउज़र के हिसाब से अलग-अलग हो सकता है. खास तौर पर, गहरे रंग, जैसे कि black के लिए ऐसा हो सकता है. Chrome में, ये बॉर्डर स्टाइल ठोस जैसी दिखेंगी और Firefox में, उन्हें हल्का करके दूसरा गहरा रंग दिया जाएगा.

ब्राउज़र का व्यवहार अन्य बॉर्डर स्टाइल के लिए भी अलग-अलग हो सकता है. इसलिए, अलग-अलग ब्राउज़र में अपनी साइट की जांच करना ज़रूरी है. इस अंतर का एक सामान्य उदाहरण यह है कि हर ब्राउज़र dotted और dashed स्टाइल को कैसे रेंडर करता है.

Chrome, Firefox, और Safari में दिखाई गई बॉर्डर.

बॉक्स के दोनों तरफ़ बॉर्डर स्टाइल सेट करने के लिए, 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 सबसे ऊपर और सबसे नीचे होगा.

बॉर्डर लगाएं.

फिर से कोशिश करें!

पहली पंक्ति पर बॉर्डर लगाएं.

फिर से कोशिश करें!