CSS Borders का परिचय
वेब पेज पर एलिमेंट्स के चारों ओर बॉर्डर जोड़ना वेब डिज़ाइन की एक महत्वपूर्ण विशेषता है। बॉर्डर्स का उपयोग वेब पेज की सामग्री को अलग करने के लिए किया जा सकता है, जिससे लोगों के लिए पेज पर प्रस्तुत जानकारी को समझना आसान हो जाता है।
CSS border प्रॉपर्टी का उपयोग HTML एलिमेंट का बॉर्डर सेट करने के लिए किया जाता है। बॉर्डर प्रॉपर्टी तीन सब-प्रॉपर्टीज़ का शॉर्टहैंड है जो बॉर्डर की स्टाइल, कलर और विड्थ को परिभाषित करती हैं।
बॉर्डर की तीन सब-प्रॉपर्टीज़
border-width- बॉर्डर की मोटाई निर्दिष्ट करता हैborder-color- बॉर्डर का रंग निर्दिष्ट करता हैborder-style- बॉर्डर की स्टाइल निर्दिष्ट करता है
जब आप बॉर्डर परिभाषित कर रहे होते हैं, तो आप या तो border प्रॉपर्टी का उपयोग करके बॉर्डर निर्दिष्ट कर सकते हैं या इसकी प्रत्येक सब-प्रॉपर्टी का उपयोग कर सकते हैं। हम इस आर्टिकल में दोनों दृष्टिकोणों पर चर्चा करेंगे।
CSS बॉर्डर सब-प्रॉपर्टीज़ विस्तार से
1. border-style प्रॉपर्टी
border-style प्रॉपर्टी का उपयोग यह परिभाषित करने के लिए किया जाता है कि वेब पेज पर किस प्रकार का बॉर्डर प्रदर्शित करना है। दूसरे शब्दों में, border-style निर्धारित करता है कि वेब पेज पर बॉर्डर लाइनें कैसी दिखती हैं: सॉलिड, डॉटेड, डैश्ड, आदि।
border-style प्रॉपर्टी को 10 संभावित मान असाइन किए जा सकते हैं। यहां बताया गया है कि बॉक्स पर लागू होने पर इनमें से प्रत्येक स्टाइल कैसा दिखाई देता है, साथ में प्रत्येक स्टाइल का विवरण:
इन वेब एलिमेंट्स को बनाने के लिए हमने जिस CSS कोड का उपयोग किया वह इस प्रकार है:
.box { border-style: solid; }
.box { border-style: dotted; }
.box { border-style: dashed; }
.box { border-style: double; }
.box { border-style: ridge; }
.box { border-style: groove; }
.box { border-style: inset; }
.box { border-style: outset; }
.box { border-style: none; }
.box { border-style: hidden; }2. border-width प्रॉपर्टी
border-width प्रॉपर्टी CSS बॉर्डर की चौड़ाई सेट करती है। बॉर्डर की चौड़ाई को CSS लेंथ वैल्यू (pt, px, em, आदि) का उपयोग करके या तीन कस्टम border-width वैल्यूज़ में से एक का उपयोग करके सेट किया जा सकता है: thin, medium, और thick।
मान लीजिए हम एक बॉक्स के चारों ओर 5px सॉलिड बॉर्डर बनाना चाहते हैं। हम निम्न कोड का उपयोग करके ऐसा कर सकते हैं:
<style>
.box { border-style: solid; border-width: 5px; }
</style>
<html>
<p class="box">5px thick solid border</p>
</html>
कोड एडिटर में बटन पर क्लिक करके हमारे कोड का आउटपुट देखें।
3. border-color प्रॉपर्टी
जैसा कि आप उम्मीद करेंगे, कलर के लिए एक प्रॉपर्टी रंग निर्दिष्ट करती है। border-color प्रॉपर्टी का उपयोग CSS में बॉर्डर के लिए रंग सेट करने के लिए किया जाता है। border-color प्रॉपर्टी द्वारा स्वीकार किए जाने वाले कलर वैल्यूज़ हैं:
- name (रंग का नाम, जैसे
blue) - HEX (एक हेक्साडेसिमल कलर वैल्यू, जैसे
#000) - HSL (एक HSL कलर वैल्यू, जैसे
hsl(10, 100%, 25%)) - RGB (एक RGB कलर वैल्यू, जैसे
rgb(102, 222, 95)) transparent
मान लीजिए आप 5px चौड़े डॉटेड नीले बॉर्डर वाला बॉक्स बनाना चाहते हैं। आप निम्न कोड का उपयोग करके ऐसा कर सकते हैं:
<style>
.box { border-style: dotted; border-width: 5px; border-color: blue; }
</style>
<html>
<p class="box">5px thick blue dotted border</p>
</html>कोड एडिटर में बटन पर क्लिक करके हमारे कोड का आउटपुट देखें।
सब-प्रॉपर्टीज़ में मल्टीपल वैल्यूज़
CSS border प्रॉपर्टी की प्रत्येक सब-प्रॉपर्टी मल्टीपल वैल्यूज़ स्वीकार कर सकती है। यह आपको CSS में किसी एलिमेंट के प्रत्येक एज के लिए कस्टम बॉर्डर सेट करने की अनुमति देता है।
यदि आप CSS में किसी एलिमेंट के प्रत्येक एज के लिए कस्टम बॉर्डर सेट करना चाहते हैं तो ध्यान रखने योग्य नियम यहां दिए गए हैं:
- यदि आप एक वैल्यू निर्दिष्ट करते हैं, तो बॉर्डर स्टाइल सभी एजेज पर लागू होगी।
- यदि आप दो वैल्यूज़ निर्दिष्ट करते हैं, तो निम्न क्रम उपयोग किया जाएगा:
- टॉप और बॉटम, लेफ्ट और राइट
- यदि आप तीन वैल्यूज़ निर्दिष्ट करते हैं, तो निम्न क्रम उपयोग किया जाएगा:
- टॉप, राइट और लेफ्ट, बॉटम
- यदि आप चार वैल्यूज़ निर्दिष्ट करते हैं, तो निम्न क्रम उपयोग किया जाएगा:
- टॉप, राइट, बॉटम, लेफ्ट
मान लीजिए हम सॉलिड टॉप और बॉटम तथा डॉटेड लेफ्ट और राइट वाला बॉर्डर बनाना चाहते हैं। हम इस कार्य को पूरा करने के लिए निम्न कोड का उपयोग कर सकते हैं:
<style>
.box { border-style: solid dashed; }
</style>
<html>
<p class="box">solid top and dashed sides border</p>
</html>कोड एडिटर में बटन पर क्लिक करके हमारे कोड का आउटपुट देखें।
हमारे कोड में, हमने दो बॉर्डर स्टाइल्स निर्दिष्ट करके एक कॉम्बिनेशन बॉर्डर बनाया। यह एलिमेंट अपने लेफ्ट और राइट एजेज पर डॉटेड बॉर्डर स्टाइल का उपयोग करता है, और एलिमेंट के टॉप और बॉटम पर सॉलिड स्टाइल का उपयोग करता है। हम वही दृष्टिकोण उपयोग करेंगे यदि हम बॉर्डर कलर या विड्थ बदलना चाहते हैं।
CSS बॉर्डर शॉर्टहैंड
CSS बॉर्डर को परिभाषित करने के लिए तीन सब-प्रॉपर्टीज़ उपयोग की जा सकती हैं। ऊपर के उदाहरणों में, हमने चर्चा की कि इनमें से प्रत्येक सब-प्रॉपर्टी का व्यक्तिगत रूप से उपयोग कैसे किया जाए। हालांकि, सभी बॉर्डर सब-प्रॉपर्टीज़ को एक ही प्रॉपर्टी में निर्दिष्ट करना संभव है। यह हमारे कोड को छोटा करने की अनुमति देगा।
border प्रॉपर्टी CSS बॉर्डर को परिभाषित करने के लिए निम्न संरचना का उपयोग करती है:
border-width(वैकल्पिक)border-style(आवश्यक)border-color(वैकल्पिक)
मान लीजिए हम टेक्स्ट की एक लाइन के चारों ओर 5px सॉलिड गुलाबी बॉर्डर बनाना चाहते हैं। हम निम्न कोड का उपयोग करके ऐसा कर सकते हैं:
<style>
.box { border: 5px solid pink; }
</style>
<html>
<p class="box">5px solid pink border</p>
</html>कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।
हमारे कोड में, आप देख सकते हैं कि हम तीन लाइनों और प्रत्येक व्यक्तिगत बॉर्डर सब-प्रॉपर्टी का उपयोग करने के बजाय एक लाइन पर अपना बॉर्डर परिभाषित करने में सक्षम थे।
CSS इंडिविजुअल बॉर्डर्स (Individual Borders)
बॉर्डर सब-प्रॉपर्टीज़ और प्रॉपर्टी को वेब एलिमेंट के व्यक्तिगत साइड पर भी लागू किया जा सकता है। यदि आप वेब एलिमेंट पर किसी विशिष्ट बॉर्डर की उपस्थिति सेट करना चाहते हैं, तो आप इन प्रॉपर्टीज़ का उपयोग कर सकते हैं:
border-left-[property]border-right-[property]border-top-[property]border-bottom-[property]
प्रॉपर्टी का मान हो सकता है:
style(बॉर्डर की स्टाइल सेट करने के लिए)color(बॉर्डर का रंग सेट करने के लिए)width(बॉर्डर की मोटाई सेट करने के लिए)- खाली (बॉर्डर शॉर्टहैंड का उपयोग करके बॉर्डर परिभाषित करने के लिए)
सभी संभावित सब-प्रॉपर्टी-वैल्यू कॉम्बिनेशन्स
- border-left-style, border-left-color, border-left-width
- border-right-style, border-right-color, border-right-width
- border-top-style, border-top-color, border-top-width
- border-bottom-style, border-bottom-color, border-bottom-width
उदाहरण: मिक्स्ड बॉर्डर्स
मान लीजिए हम टेक्स्ट का एक बॉक्स बनाना चाहते हैं जिसके लेफ्ट पर 2px चौड़ा सॉलिड बॉर्डर हो, और टॉप पर 5px चौड़ा डॉटेड बॉर्डर हो। हम इस कार्य को पूरा करने के लिए निम्न कोड का उपयोग कर सकते हैं:
<style>
.box { border-left: 2px solid; border-top: 5px dotted; }
</style>
<html>
<p class="box">mixed border</p>
</html>हमारे बॉक्स के लेफ्ट पर 2px सॉलिड बॉर्डर है, जबकि टॉप पर 5px डॉटेड बॉर्डर है। इंडिविजुअल बॉर्डर प्रॉपर्टीज़ का उपयोग करके, हम यह निर्दिष्ट करने में सक्षम थे कि बॉक्स के प्रत्येक एज पर बॉर्डर कैसा दिखना चाहिए।
निष्कर्ष
border प्रॉपर्टी का उपयोग CSS में बॉर्डर बनाने के लिए किया जाता है, और इसकी तीन सब-प्रॉपर्टीज़ हैं - स्टाइल, कलर, और विड्थ - जिनका उपयोग बॉर्डर के प्रत्येक भाग को अलग-अलग कस्टमाइज़ करने के लिए किया जाता है।
इस ट्यूटोरियल में, कुछ उदाहरणों के साथ, चर्चा की गई कि बॉर्डर प्रॉपर्टी और इसकी सभी तीन सब-प्रॉपर्टीज़ का उपयोग CSS में बॉर्डर बनाने के लिए कैसे किया जाए। हमने यह भी पता लगाया कि इंडिविजुअल बॉर्डर प्रॉपर्टीज़ का उपयोग करके किसी एलिमेंट के प्रत्येक साइड को कैसे स्टाइल किया जाए।
यदि आप CSS बॉर्डर्स के बारे में अधिक जानना चाहते हैं, तो हमारे अन्य ट्यूटोरियल्स देखें जो बताते हैं कि बॉर्डर इमेजेज, बॉर्डर कोलैप्स, आउटलाइन्स और आउटलाइन ऑफसेट्स, राउंडेड कॉर्नर्स के लिए बॉर्डर रेडियस, और सौंदर्य की दृष्टि से मनभावन बॉक्स शैडो इफेक्ट को कैसे लागू किया जाए!
