सीमाएं

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

एक-दूसरे के बगल में तीन फ़ोटो फ़्रेम.
बीच वाले फ़्रेम में, बॉक्स मॉडल के सेक्शन सबसे ऊपर हैं

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

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

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

स्टाइल

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

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

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

Chrome, Firefox, और Safari में बॉर्डर का डेमो, जिसमें बॉर्डर के दिखने के तरीके में मामूली अंतर दिखाया गया है
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;
}

बॉर्डर वाली इमेज

आपको सीएसएस में सिर्फ़ स्ट्रोक-आधारित बॉर्डर का इस्तेमाल नहीं करना होगा. 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
black
currentColor
.my-element {
  border: solid hotpink;
}

बॉर्डर की डिफ़ॉल्ट चौड़ाई क्या होती है?

solid
1px
medium

border-inline: 1px solid...

ऊपर और नीचे (लैटिन लेआउट में) बॉर्डर लगाएं.
लेटर बॉक्स के बाईं और दाईं ओर बॉर्डर लगाएं (लैटिन लेआउट में).
पहली लाइन पर बॉर्डर लगाएं.
अंदर बॉर्डर लगाएं.