CSS बॉर्डर्स:स्टेप-बाय-स्टेप ट्यूटोरियल

सीएसएस बॉर्डर प्रॉपर्टी का इस्तेमाल . की बॉर्डर सेट करने के लिए किया जाता है एचटीएमएल तत्व। इसकी आशुलिपि गुण हैं border-width , border-color , और border-style .

वेब पेज पर तत्वों के चारों ओर बॉर्डर जोड़ना वेब डिज़ाइन की एक महत्वपूर्ण विशेषता है। वेब पेज की सामग्री को अलग करने के लिए बॉर्डर का उपयोग किया जा सकता है, जिससे लोगों के लिए पेज पर प्रस्तुत जानकारी की व्याख्या करना आसान हो जाता है।

HTML तत्व की सीमा निर्धारित करने के लिए CSS बॉर्डर प्रॉपर्टी का उपयोग किया जाता है। बॉर्डर प्रॉपर्टी तीन उप-प्रॉपर्टी के लिए शॉर्टहैंड है जो बॉर्डर की शैली, रंग और चौड़ाई को परिभाषित करती है।

इस ट्यूटोरियल में, हम चर्चा करेंगे कि HTML एलिमेंट के लिए बॉर्डर डिज़ाइन करने के लिए CSS बॉर्डर प्रॉपर्टी का उपयोग कैसे करें, और इसके उप-गुणों का उपयोग कैसे करें। इस ट्यूटोरियल के अंत तक, आप CSS में बॉर्डर डिज़ाइन करने के लिए आवश्यक सभी ज्ञान से लैस होंगे।

सीएसएस में बॉर्डर का परिचय

जैसा कि हमने पहले कहा, CSS बॉर्डर प्रॉपर्टी का उपयोग वेब एलिमेंट के चारों ओर बॉर्डर निर्दिष्ट करने के लिए किया जाता है। उदाहरण के लिए, एक छवि, एक बॉक्स, या एक वेब फ़ॉर्म के चारों ओर एक बॉर्डर लगाया जा सकता है।

सीमा गुण तीन उप-गुणों के लिए आशुलिपि है जिनका उपयोग किसी तत्व की सीमा पर विशिष्ट शैलियों को लागू करने के लिए किया जाता है। आशुलिपि गुण हैं:

• border-width (सीमा की मोटाई निर्दिष्ट करता है)
• border-color (सीमा का रंग निर्दिष्ट करता है)
• border-style (सीमा की शैली निर्दिष्ट करता है)

जब आप किसी बॉर्डर को परिभाषित कर रहे हों, तो आप border . का उपयोग कर सकते हैं संपत्ति सीमा निर्दिष्ट करने या उसके प्रत्येक उप-गुणों का उपयोग करने के लिए। हम इस पूरे लेख में दोनों तरीकों पर चर्चा करेंगे।

CSS बॉर्डर सब-प्रॉपर्टी

जैसा कि हमने पहले चर्चा की, CSS में बॉर्डर को परिभाषित करने के लिए तीन उप-प्रॉपर्टी का उपयोग किया जाता है। आइए इनमें से प्रत्येक उप-प्रॉपर्टी को तोड़ दें और एक उदाहरण देखें कि वे कैसे काम करते हैं।

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

border-style सीएसएस में संपत्ति

बॉर्डर स्टाइल प्रॉपर्टी का उपयोग यह परिभाषित करने के लिए किया जाता है कि वेब पेज पर किस प्रकार की बॉर्डर प्रदर्शित की जाए। दूसरे शब्दों में, border-style यह निर्धारित करता है कि वेब पेज पर सीमा रेखाएं कैसी दिखती हैं:ठोस, बिंदीदार, धराशायी, आदि।

10 संभावित मान हैं जिन्हें border-style . को असाइन किया जा सकता है संपत्ति। प्रत्येक शैली के विवरण के साथ, बॉक्स पर लागू होने पर इनमें से प्रत्येक शैली कैसे दिखाई देती है:

इन वेब तत्वों को बनाने के लिए हमने जिस CSS कोड का उपयोग किया है वह इस प्रकार है:

.box { सीमा-शैली:ठोस; }.बॉक्स { सीमा-शैली:बिंदीदार; }.बॉक्स { सीमा-शैली:धराशायी; }.बॉक्स { सीमा-शैली:डबल; }.बॉक्स { सीमा-शैली:रिज; }.बॉक्स { सीमा-शैली:नाली; }.बॉक्स { सीमा-शैली:इनसेट; }.बॉक्स { सीमा-शैली:प्रारंभ; }.बॉक्स { सीमा-शैली:कोई नहीं; }.बॉक्स { सीमा-शैली:छिपा हुआ; } 

 जैसा कि आप देख सकते हैं, हमारे कोड में हमने अपनी सीमाओं को स्टाइल करने के लिए प्रत्येक संभावित मूल्य का उपयोग किया है।
 
border-width सीएसएस में संपत्ति
 

 border-width संपत्ति सीएसएस सीमा की चौड़ाई निर्धारित करती है। सीएसएस लंबाई मान (pt . का उपयोग करके बॉर्डर की चौड़ाई सेट की जा सकती है , px , em , आदि) या तीन कस्टम border-width . में से किसी एक का उपयोग करके मान:thin , medium , और thick ।
 

 मान लीजिए हम एक 5px बनाना चाहते हैं एक बॉक्स के चारों ओर ठोस सीमा। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:
 
 
5px मोटी ठोस सीमा
 

  हमारे कोड का आउटपुट देखने के लिए ऊपर दिए गए कोड संपादक में बटन। 
 

 हमने एक बॉर्डर बनाया है जो ठोस शैली का उपयोग करता है और जिसकी मोटाई 5px है।
 
border-color सीएसएस में संपत्ति
 

 जैसा कि आप उम्मीद करते हैं, रंग के लिए एक संपत्ति रंग निर्दिष्ट करती है। border-color CSS में बॉर्डर के लिए रंग सेट करने के लिए संपत्ति का उपयोग किया जाता है। border-color . द्वारा स्वीकृत रंग मान संपत्ति हैं:
 
 
नाम (रंग का नाम, जैसे blue )
 
HEX (एक हेक्साडेसिमल रंग मान, जैसे #000 )
 
HSL (एक HSL रंग मान, जैसे hsl(10, 100%, 25%) )
 
RGB (RGB रंग मान, जैसे rgb(102, 222, 95) )
 
transparent 
 
 

 मान लीजिए कि आप 5px चौड़ी बिंदीदार नीली सीमा वाला एक बॉक्स बनाना चाहते हैं। आप इस कोड का उपयोग करके ऐसा कर सकते हैं:
 
 
5px मोटी नीली डॉटेड बॉर्डर
 

 हमारे कोड का आउटपुट देखने के लिए ऊपर दिए गए कोड संपादक में  बटन। 
 
उप-प्रॉपर्टी एकाधिक मान
 

 CSS border . के लिए प्रत्येक उप-प्रॉपर्टी संपत्ति कई मूल्यों को स्वीकार कर सकती है। यह आपको CSS में किसी तत्व के प्रत्येक किनारे के लिए कस्टम बॉर्डर सेट करने की अनुमति देता है।
 

 यदि आप CSS में किसी तत्व के प्रत्येक किनारे के लिए कस्टम बॉर्डर सेट करना चाहते हैं, तो ध्यान रखने योग्य नियम यहां दिए गए हैं:
 
 
यदि आप एक मान निर्दिष्ट करते हैं, तो बॉर्डर शैली सभी किनारों पर लागू हो जाएगी।
 
यदि आप दो मान निर्दिष्ट करते हैं, तो निम्न क्रम का उपयोग किया जाएगा:
 
ऊपर और नीचे, बाएँ और दाएँ
 
 
 
यदि आप तीन मान निर्दिष्ट करते हैं, तो निम्न क्रम का उपयोग किया जाएगा:
 
ऊपर, दाएं और बाएं, नीचे
 
 
 
यदि आप चार मान निर्दिष्ट करते हैं, तो निम्न क्रम का उपयोग किया जाएगा:
 
ऊपर, दाएं, नीचे, बाएं
 
 
 
 

 मान लीजिए कि हम एक ठोस ऊपर और नीचे और एक बिंदीदार बाएँ और दाएँ के साथ एक बॉर्डर बनाना चाहते हैं। हम इस कार्य को पूरा करने के लिए निम्नलिखित कोड का उपयोग कर सकते हैं:
 
 
सॉलिड टॉप और डैश्ड साइड बॉर्डर
 

 हमारे कोड का आउटपुट देखने के लिए ऊपर दिए गए कोड संपादक में  बटन। 
 

 हमारे कोड में, हमने दो बॉर्डर शैलियों को निर्दिष्ट करके एक संयोजन बॉर्डर बनाया है। यह तत्व अपने बाएं और दाएं किनारों पर धराशायी सीमा शैली और तत्व के ऊपर और नीचे ठोस शैली का उपयोग करता है।
 

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

 तीन CSS उप-प्रॉपर्टी हैं जिनका उपयोग बॉर्डर को परिभाषित करने के लिए किया जा सकता है।
 

 उपरोक्त उदाहरणों में, हमने चर्चा की है कि इन उप-गुणों में से प्रत्येक का अलग-अलग उपयोग कैसे करें। हालांकि, एक ही संपत्ति में सभी सीमा उप-गुणों को निर्दिष्ट करना संभव है। यह हमें हमारे कोड को छोटा करने की अनुमति देगा।
 

 सीमा संपत्ति सीएसएस सीमा को परिभाषित करने के लिए निम्नलिखित संरचना का उपयोग करती है:
 
 
border-width (वैकल्पिक)
 
border-style (आवश्यक)
 
border-color (वैकल्पिक)
 
 

 मान लीजिए कि हम टेक्स्ट की एक पंक्ति के चारों ओर एक 5px ठोस गुलाबी बॉर्डर बनाना चाहते हैं। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:
 
 
5px सॉलिड पिंक बॉर्डर
 

 दबाएं  हमारे एचटीएमएल/सीएसएस कोड का आउटपुट देखने के लिए ऊपर दिए गए कोड संपादक में बटन। 
 

 हमारे कोड में, आप देख सकते हैं कि हम तीन पंक्तियों और प्रत्येक व्यक्तिगत सीमा उप-प्रॉपर्टी का उपयोग करने के बजाय, अपनी सीमा को एक पंक्ति पर परिभाषित करने में सक्षम थे।
 
CSS व्यक्तिगत बॉर्डर
 

 सीमा उप-गुणों और संपत्ति को वेब तत्व के एक व्यक्तिगत पक्ष पर भी लागू किया जा सकता है। यदि आप किसी वेब तत्व पर किसी विशिष्ट बॉर्डर की उपस्थिति सेट करना चाहते हैं, तो आप इन गुणों का उपयोग कर सकते हैं:
 
 
border-left-[property] 
 
border-right-[property] 
 
border-top-[property] 
 
border-bottom-[property] 
 
 

 संपत्ति का मूल्य या तो हो सकता है:
 
 
style (सीमा की शैली निर्धारित करने के लिए)
 
color (बॉर्डर का रंग सेट करने के लिए)
 
width (बॉर्डर की मोटाई सेट करने के लिए)
 
रिक्त (सीमा को परिभाषित करने के लिए सीमा आशुलिपि का उपयोग करने के लिए)
 
 

 गुण और मान उपयोग करने और याद रखने में आसान हैं, लेकिन यहां सभी संभावित उप-संपत्ति-मूल्य संयोजनों की एक सूची दी गई है:
 
 
बॉर्डर लेफ्ट स्टाइल 
 
बॉर्डर लेफ्ट कलर
 
सीमा बाईं चौड़ाई
 
 
 
सीमा दाहिनी शैली
 
सीमा दायां रंग
 
सीमा दाहिनी चौड़ाई
 
 
 
बॉर्डर टॉप स्टाइल
 
बॉर्डर टॉप कलर
 
सीमा की ऊपरी चौड़ाई
 
 
 
बॉर्डर बॉटम स्टाइल
 
बॉर्डर बॉटम कलर
 
सीमा के नीचे की चौड़ाई
 
 

 मान लीजिए कि हम टेक्स्ट का एक बॉक्स बनाना चाहते हैं जिसमें बाईं ओर एक ठोस बॉर्डर है जो 2px चौड़ा है, और शीर्ष पर एक बिंदीदार बॉर्डर जो 5px चौड़ा है। हम इस कार्य को पूरा करने के लिए निम्नलिखित कोड का उपयोग कर सकते हैं:
 
 
मिश्रित बॉर्डर
 

 हमारे बॉक्स के बाईं ओर, हमारे पास 2px ठोस बॉर्डर है, जबकि शीर्ष पर 5pc बिंदीदार बॉर्डर है। अलग-अलग बॉर्डर गुणों का उपयोग करके, हम यह निर्दिष्ट करने में सक्षम थे कि बॉक्स के प्रत्येक किनारे पर बॉर्डर कैसा दिखना चाहिए।
 
निष्कर्ष
 

 border CSS में एक बॉर्डर बनाने के लिए संपत्ति का उपयोग किया जाता है, और इसमें तीन उप-गुण-शैली, रंग और चौड़ाई हैं- जिनका उपयोग सीमा के प्रत्येक भाग को अलग-अलग अनुकूलित करने के लिए किया जाता है।
 

 इस ट्यूटोरियल ने कुछ उदाहरणों के साथ, CSS में बॉर्डर बनाने के लिए बॉर्डर प्रॉपर्टी और उसके सभी तीन उप-गुणों का उपयोग करने के बारे में चर्चा की। हमने यह भी पता लगाया कि व्यक्तिगत सीमा गुणों का उपयोग करके किसी तत्व के प्रत्येक पक्ष को कैसे स्टाइल किया जाए।
 

 यदि आप CSS बॉर्डर के बारे में अधिक जानना चाहते हैं, तो हमारे अन्य ट्यूटोरियल देखें जो बताते हैं कि बॉर्डर इमेज, बॉर्डर पतन, आउटलाइन और आउटलाइन ऑफ़सेट को कैसे लागू किया जाए, गोल कोनों के लिए बॉर्डर रेडियस और सौंदर्य की दृष्टि से मनभावन बॉक्स शैडो इफेक्ट!