बॉक्स मॉडल: CSS बॉर्डर

एलिमेंट का बॉर्डर (border) एलिमेंट के सामग्री और इनर पैडिंग के चारों ओर एक या अधिक बॉर्डर है。

CSS border अभियोगता एलिमेंट के बॉर्डर के स्टाइल, चौड़ाई और रंग को निर्धारित करती है。

CSS बॉर्डर

HTML में, हम टेबल का उपयोग करके लेख के चारों ओर बॉर्डर बनाते हैं, लेकिन CSS बॉर्डर अभियोगता का उपयोग करके किसी भी एलिमेंट पर बेहतरीन प्रभाव बनाने के लिए इसे आजमाते हैं。

एलिमेंट के बाहरी मार्गिन के अंदर एलिमेंट का बॉर्डर (border) होता है. एलिमेंट का बॉर्डर एलिमेंट के सामग्री और इनर पैडिंग के चारों ओर एक या अधिक बॉर्डर है。

हर बॉर्डर के 3 पहलू होते हैं: चौड़ाई, स्टाइल, और रंग. नीचे के अनुभाग में, हम इन तीनों पहलुओं का विस्तार से वर्णन करेंगे。

बॉर्डर और पृष्ठभूमि

CSS नियम ने कहा कि बॉर्डर 'एलिमेंट की पृष्ठभूमि' के ऊपर चित्रित होता है. यह बहुत महत्वपूर्ण है, क्योंकि कुछ बॉर्डर 'अंशकालीन' (जैसे बिंदु बॉर्डर या डबल बॉर्डर) होते हैं, तो एलिमेंट की पृष्ठभूमि बॉर्डर के दृश्यीय हिस्सों के बीच दिखाई देनी चाहिए。

CSS2 ने कहा कि पृष्ठभूमि केवल इनर पैडिंग तक फैलती है, न कि बॉर्डर तक. बाद में CSS2.1 ने इसे सुधारा: एलिमेंट की पृष्ठभूमि सामग्री, इनर पैडिंग और बॉर्डर क्षेत्र की पृष्ठभूमि है. अधिकांश ब्राउज़र CSS2.1 का पालन करते हैं, हालांकि कुछ पुराने ब्राउज़र कोई अलग प्रदर्शन कर सकते हैं。

बॉर्डर का स्टाइल

स्टाइल बॉर्डर के सबसे महत्वपूर्ण पहलू है, यह इसलिए नहीं है कि स्टाइल बॉर्डर के प्रदर्शन को नियंत्रित करता है (बेशक, स्टाइल बॉर्डर के प्रदर्शन को नियंत्रित करता है), बल्कि इसलिए कि बिना स्टाइल के बॉर्डर की कोई भी उपस्थिति नहीं होगी。

CSS का border-style अभियोगता10 अलग-अलग non-inherit स्टाइल परिभाषित किए गए हैं, जिसमें none भी शामिल है。

उदाहरण के लिए, आप एक चित्र के बॉर्डर को outset सेट कर सकते हैं, ताकि यह 'उभरा बटन' जैसा दिखाया जाए:

a:link img {border-style: outset;}

अनेक स्टाइल परिभाषित करना

आप एक बॉर्डर के लिए कई स्टाइल परिभाषित कर सकते हैं, उदाहरण के लिए:

p.aside {border-style: solid dotted dashed double;}

उपरी इस नियम ने class नाम के लिए 'aside' के पैराग्राफ को चार तरह के बॉर्डर स्टाइल परिभाषित किया: ठोस ऊपरी बॉर्डर, बिंदु बाईं बॉर्डर, और डबल बाईं बॉर्डर。

हम फिर से यहाँ के मान को top-right-bottom-left की क्रमवारी में प्रयोग करते हैं, और अनेक मानों से अलग-अलग इनर पैडिंग सेट करने के बारे में भी इसी क्रमवारी को देखा है。

एकल स्टाइल परिभाषित करना

यदि आप एकल किनारे के लिए बॉर्डर स्टाइल सेट करना चाहते हैं, न कि सभी 4 किनारों के लिए, तो नीचे दिए गए एकल किनारे बॉर्डर स्टाइल प्रतियोगिता का उपयोग कर सकते हैं:

तो, इन दोनों तरीके समान हैं:

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

ध्यान:यदि आप दूसरे तरीके का उपयोग करना चाहते हैं, तो एकल गुण को लघु गुण के बाद रखना चाहिए। क्योंकि अगर आप एकल गुण को border-style से पहले रखेंगे, तो लघु गुण का माप none कर देगा。

बाहरी रेखा की चौड़ाई

आप द्वारा border-width गुणबाहरी रेखा की चौड़ाई को निर्दिष्ट करना

बाहरी रेखा की चौड़ाई को निर्दिष्ट करने के दो तरीके हैं: आप सीधे माप की गणना कर सकते हैं, जैसे 2px या 0.1em; या 3 गुणों में से एक का उपयोग कर सकते हैं, जो थिन, मीडियम (डिफ़ॉल्ट) और थिक हैं。

टिप्पणी:CSS ने 3 गुणों की विशिष्ट चौड़ाई को परिभाषित नहीं किया है, इसलिए एक उपयोगकर्ता कोष्टक थिन, मीडियम (डिफ़ॉल्ट) और थिक अथवा 5px, 3px और 2px के बराबर के रूप में सेट कर सकता है, जबकि दूसरा उपयोगकर्ता कोष्टक इसके बजाय 3px, 2px और 1px के बराबर के रूप में सेट कर सकता है。

तो, हम बाहरी रेखा की चौड़ाई को इस तरह सेट कर सकते हैं:

p {border-style: solid; border-width: 5px;}

या:

p {border-style: solid; border-width: thick;}

एकल चौड़ाई परिभाषित करना

आप एकत्र करके top-right-bottom-left के क्रम में एलिमेंट के हर दिशा की बाहरी रेखा को सेट कर सकते हैं:

p {border-style: solid; border-width: 15px 5px 15px 5px;}

उपरोक्त उदाहरण को इस तरह भी लिखा जा सकता है (इस लिखावजने को इस तरह कहा जाता है):मूल्य की नकल）：

p {border-style: solid; border-width: 15px 5px;}

आप भी नीचे के गुणों के द्वारा बाहरी रेखा के हर दिशा की चौड़ाई को अलग से सेट कर सकते हैं:

तो, नीचे के नियम उपरोक्त उदाहरण के समान हैं:

p {
  border-style: solid;
  border-top-width: 15px;
  border-right-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 5px;
  }

कोई बाहरी रेखा नहीं

पहले के उदाहरण में, आपने देखा होगा, अगर आप बाहरी रेखा दिखाना चाहते हैं, तो आपको बाहरी रेखा शैली नियत करना होगा, जैसे solid या outset。

तो अगर border-style को none रखा तो क्या होगा:

p {border-style: none; border-width: 50px;}

बॉर्डर की चौड़ाई 50px है, लेकिन बॉर्डर शैली none है। इस स्थिति में, बॉर्डर की शैली केवल नहीं है, बॉर्डर की चौड़ाई भी 0 हो जाती है। बॉर्डर गायब हो गया, क्यों?

इसका कारण यह है कि अगर बॉर्डर शैली none है, अर्थात् बॉर्डर पूरी तरह से नहीं है, तो बॉर्डर की चौड़ाई कोई नहीं हो सकती, इसलिए बॉर्डर चौड़ाई 0 रखी जाती है, न कि आपके पहले निर्धारित किया गया चौड़ाई।

इस बात को याद रखना बहुत महत्वपूर्ण है। वास्तव में, बॉर्डर शैली घोषित न करना एक आम गलती है। नीचे दिए गए नियमों के अनुसार, सभी h1 एलिमेंट कोई बॉर्डर नहीं होगा, चौड़ाई 20 पिक्सल के बगल:

h1 {border-width: 20px;}

क्योंकि border-style का डिफ़ॉल्ट मूल्य none है, अगर शैली घोषित नहीं की गई है, तो यह बॉर्डर-style: none के समान होगा。इसलिए, अगर आप चाहते हैं कि बॉर्डर दिखाई दे, तो आपको बॉर्डर शैली घोषित करना होगा。

बॉर्डर का रंग

बॉर्डर रंग सेट करना बहुत सरल है। CSS एक साधारण border-color गुणयह एक बार में अधिकतम 4 रंग मूल्य ले सकता है।

किसी भी तरह के रंग मूल्य का उपयोग किया जा सकता है, उदाहरण के लिए नामक रंग, हेक्साडेसिमल और RGB मूल्य:

p {
  border-style: solid;
  border-color: blue rgb(25%,35%,45%) #909090 red;
  }

अगर रंग मूल्य 4 से कम है, तो वैल्यू की प्रतिलिपि काम करेगी। उदाहरण में नीचे दिए गए नियमन ने पैराग्राफ के ऊपरी और नीचे बॉर्डर को नीला रंग का और बाएँ और दायाँ बॉर्डर को लाल रंग का घोषित किया है:

p {
  border-style: solid;
  border-color: blue red;
  }

टिप्पणी:डिफ़ॉल्ट बॉर्डर रंग एलिमेंट के फूटन्ट का रंग है। अगर बॉर्डर का रंग घोषित नहीं किया गया है, तो यह एलिमेंट के टेक्स्ट के रंग के समान होगा। दूसरी ओर, अगर एलिमेंट कोई टेक्स्ट नहीं है, उदाहरण के लिए एक तालिका, जिसमें केवल छवियां हैं, तो इस तालिका का बॉर्डर रंग उसके माता एलिमेंट के टेक्स्ट के रंग होगा (क्योंकि color अनुवर्तन कर सकता है)। इस माता एलिमेंट बॉडी, div या एक और table हो सकता है।

एकल रंग निर्धारित करना

कुछ एकल बॉर्डर रंग गुण हैं। उनका सिद्धांत एकल शैली और चौड़ाई गुणों के समान है:

h1 एलिमेंट के लिए लाल रंग की एकल बॉर्डर और दायाँ बॉर्डर को लाल रंग का निर्दिष्ट करना चाहते हैं, तो इस तरह निर्दिष्ट करें:

h1 {
  border-style: solid;
  border-color: black;
  border-right-color: red;
  }

स्पष्ट बॉर्डर

हमने बीते हुए बताया है, अगर बॉर्डर का शैली नहीं है, तो उसकी चौड़ाई नहीं है। लेकिन कुछ हालातों में आप एक अदृश्य बॉर्डर बनाना चाहिए।

CSS2 ने बॉर्डर का रंग मूल्य transparent शामिल किया। यह रंग एक चौड़ा अदृश्य बॉर्डर बनाने के लिए उपयोग किया जाता है। नीचे दिए गए उदाहरण को देखें:

AAA
BBB
CCC

我们为上面的链接定义了如下样式：

a:link, a:visited {
  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  }
a:hover {border-color: gray;}

आपके अपने आप साबित कीजिए

एक प्रकार से, transparent के इस्तेमाल से, किनारा जैसे अतिरिक्त आंतरिक गुणा के रूप में इस्तेमाल किया जा सकता है; इसके अलावा, इसका एक अच्छा फायदा यह है कि जब आपको इसे दिखाना हो तो इसे दिखाया जा सकता है। इस पारदर्शी किनारा का अर्थ यह है कि एलिमेंट का पृष्ठभूमि बैग के क्षेत्र (यदि दिखायी जाने वाला पृष्ठभूमि हो) तक फैल जाता है。

महत्वपूर्ण बात:IE7 से पहले, IE/WIN को transparent के लिए समर्थन नहीं मिला। पुरानी संस्करणों में, IE एलिमेंट के color वैल्यू के अनुसार किनारा रंग सेट करता था。

CSS किनारा उदाहरण:

सभी किनारा विशेषताएँ एक ही व्यक्तव्य में
इस उदाहरण में, सभी चारों किनारा विशेषताओं को एक ही व्यक्तव्य में सेट करने के लिए सरल विशेषता का प्रयोग किया गया है。
चारों किनारों के शैली सेट करना
इस उदाहरण में, चारों किनारों के शैली को सेट करने के तरीके को दिखाया गया है。
प्रत्येक किनारे पर अलग-अलग किनारा सेट करना
इस उदाहरण में, एलिमेंट के सभी किनारों पर अलग-अलग किनारा सेट करने के तरीके को दिखाया गया है。
सभी किनारा चौड़ाई विशेषताएँ एक ही व्यक्तव्य में
इस उदाहरण में, सभी किनारा चौड़ाई विशेषताओं को एक ही व्यक्तव्य में सेट करने के लिए सरल विशेषता का प्रयोग किया गया है。
चारों किनारों का रंग सेट करना
इस उदाहरण में, चारों किनारों का रंग सेट करने के तरीके को दिखाया गया है। एक से चार रंगों को सेट किया जा सकता है。
सभी नीचे किनारा विशेषताएँ एक ही व्यक्तव्य में
इस उदाहरण में, सरल विशेषता के द्वारा सभी नीचे किनारा विशेषताओं को एक ही व्यक्तव्य में सेट करने को दिखाया गया है。
नीचे किनारा का रंग सेट करना
इस उदाहरण में, नीचे किनारा का रंग सेट करने के तरीके को दिखाया गया है。
नीचे किनारा के शैली सेट करना
इस उदाहरण में, नीचे किनारा के शैली को सेट करने के तरीके को दिखाया गया है。
नीचे किनारा की चौड़ाई सेट करना
इस उदाहरण में, नीचे किनारा की चौड़ाई को सेट करने के तरीके को दिखाया गया है。
सभी बाईं किनारा विशेषताएँ एक ही व्यक्तव्य में
सभी बाईं किनारा विशेषताएँ एक ही व्यक्तव्य में
बाईं किनारा का रंग सेट करना
इस उदाहरण में, बाईं किनारा का रंग सेट करने के तरीके को दिखाया गया है。
बाईं किनारा के शैली सेट करना
इस उदाहरण में, बाईं किनारा के शैली को सेट करने के तरीके को दिखाया गया है。
बाईं किनारा की चौड़ाई सेट करना
इस उदाहरण में, बाईं किनारा की चौड़ाई को सेट करने के तरीके को दिखाया गया है。
सभी दायाँ किनारा विशेषताएँ एक ही व्यक्तव्य में
इस उदाहरण में, सभी दायाँ किनारा विशेषताओं को एक ही व्यक्तव्य में सेट करने के लिए एक सरल विशेषता का प्रयोग किया गया है。
दायाँ किनारा का रंग सेट करना
इस उदाहरण में, दायाँ किनारा का रंग सेट करने के तरीके को दिखाया गया है。
दायाँ किनारा के शैली सेट करना
इस उदाहरण में, दायाँ किनारा के शैली को सेट करने के तरीके को दिखाया गया है。
दायाँ किनारा की चौड़ाई सेट करना
इस उदाहरण में, दायाँ किनारा की चौड़ाई को सेट करने के तरीके को दिखाया गया है。
सभी ऊपरी किनारा विशेषताएँ एक ही व्यक्तव्य में
इस उदाहरण में, सरल विशेषता के द्वारा सभी ऊपरी किनारा विशेषताओं को एक ही व्यक्तव्य में सेट करने को दिखाया गया है。
ऊपरी किनारा का रंग सेट करना
इस उदाहरण में ऊपरी किनारा का रंग सेट करने के तरीके दिखाया गया है。
ऊपरी किनारा की शैली सेट करना
इस उदाहरण में ऊपरी किनारा की शैली सेट करने के तरीके दिखाया गया है。
ऊपरी किनारा की चौड़ाई सेट करना
इस उदाहरण में ऊपरी किनारा की चौड़ाई सेट करने के तरीके दिखाया गया है。

CSS किनारा गुण

गुण वर्णन
border संक्षिप्त गुण, इसका उपयोग चार ओर किनारों के लिए गुणों को एक ही व्यक्तव्य में सेट करने के लिए किया जाता है。
border-style एलिमेंट के सभी बाह्य किनारों की शैली सेट करने के लिए या अलग-अलग ओर किनारों के लिए अलग-अलग बाह्य किनारा शैली सेट करता है。
border-width संक्षिप्त गुण, इसका उपयोग एलिमेंट के सभी बाह्य किनारों की चौड़ाई सेट करने के लिए किया जाता है या अलग-अलग ओर किनारों के लिए अलग-अलग चौड़ाई सेट करता है。
border-color संक्षिप्त गुण, इसका उपयोग एलिमेंट के सभी बाह्य किनारों में दिखने वाले रंग को सेट करने के लिए किया जाता है या 4 ओर किनारों के लिए अलग-अलग रंग सेट करता है。
border-bottom संक्षिप्त गुण, इसका उपयोग नीचे किनारा के सभी गुणों को एक ही व्यक्तव्य में सेट करने के लिए किया जाता है。
border-bottom-color एलिमेंट की नीचे किनारा रंग सेट करें。
border-bottom-style एलिमेंट की नीचे किनारा शैली सेट करें。
border-bottom-width एलिमेंट की नीचे किनारा चौड़ाई सेट करें。
border-left संक्षिप्त गुण, इसका उपयोग बाईं ओर किनारा के सभी गुणों को एक ही व्यक्तव्य में सेट करने के लिए किया जाता है。
border-left-color एलिमेंट की बाईं ओर किनारा रंग सेट करें。
border-left-style एलिमेंट की बाईं ओर किनारा शैली सेट करें。
border-left-width एलिमेंट की बाईं ओर किनारा चौड़ाई सेट करें。
border-right संक्षिप्त गुण, इसका उपयोग दायां ओर किनारा के सभी गुणों को एक ही व्यक्तव्य में सेट करने के लिए किया जाता है。
border-right-color एलिमेंट की दायां ओर किनारा रंग सेट करें。
border-right-style एलिमेंट की दायां ओर किनारा शैली सेट करें。
border-right-width एलिमेंट की दायां ओर किनारा चौड़ाई सेट करें。
border-top संक्षिप्त गुण, इसका उपयोग ऊपरी किनारा के सभी गुणों को एक ही व्यक्तव्य में सेट करने के लिए किया जाता है。
border-top-color एलिमेंट की ऊपरी किनारा रंग सेट करें。
border-top-style एलिमेंट की ऊपरी किनारा शैली सेट करें。
border-top-width एलिमेंट की ऊपरी किनारा चौड़ाई सेट करें。