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

CSS में बॉर्डर और आउटलाइन में क्या अंतर है?

CSS की रूपरेखा और सीमाएँ बाहरी परतों में से दो का निर्माण करती हैं सीएसएस बॉक्स मॉडल, सीमाओं और हाशिए के बीच बैठे। जबकि ये गुण समान हैं, उनके अलग-अलग मूल्य और उद्देश्य हैं।

एक के लिए, सीएसएस रूपरेखा सीमाओं के बाहर बैठती है। इसका अर्थ है कि वे उस तत्व के बाहर की सामग्री के साथ ओवरलैप कर सकते हैं जिस पर आप उन्हें लागू करते हैं। इसके साथ ही, CSS बॉर्डर किसी तत्व के आयाम को बदलते हैं लेकिन रूपरेखा नहीं।

यदि आपको बॉर्डर और बाह्यरेखा शैलियों की कल्पना करने में कठिनाई हो रही है, तो आप अपने डीबग करने के लिए ब्राउज़र के विकास उपकरण उन्हें।

सीएसएस सीमा और रूपरेखा साझा संपत्ति मूल्य

उनके मतभेदों के बावजूद, सीएसएस बॉर्डर और रूपरेखा उनके कुछ मूल्यों को साझा करते हैं। आपके द्वारा प्रत्येक के लिए उपयोग किया जाने वाला आशुलिपि भी बहुत समान है।

instagram viewer

सीएसएस सीमा और रूपरेखा आशुलिपि

अन्य जटिल CSS गुणों की तरह, बॉर्डर और आउटलाइन दोनों में आशुलिपि उपलब्ध है। ये दोनों गुण उनके आशुलिपि विकल्पों के लिए समान प्रारूप साझा करते हैं और ऐसा दिखता है।

सीमा: चौड़ाईशैलीरंग;
खाका: चौड़ाईशैलीरंग;

यह ऐसे नियम बनाता है जो कार्य करते समय इस तरह दिखाई देते हैं। बेशक, हालांकि, यह आशुलिपि इन गुणों के लिए उपलब्ध सभी मूल्यों को शामिल नहीं करती है।

बॉर्डर: 10px ठोस नीला;
बाह्यरेखा: 20px ठोस लाल;

इन आशुलिपि CSS बॉर्डर और रूपरेखा नियमों के परिणामस्वरूप एक पतली नीली सीमा होती है जिसमें एक मोटी लाल रूपरेखा होती है।

अन्य शॉर्टहैंड CSS गुणों की तरह, आप समान परिणाम प्राप्त करने के लिए अलग-अलग गुणों का भी उपयोग कर सकते हैं।

सीएसएस सीमा-चौड़ाई और रूपरेखा-चौड़ाई

बॉर्डर और आउटलाइन चौड़ाई वैकल्पिक CSS गुण मान हैं जो आपके द्वारा उपयोग किए जाने वाले बॉर्डर और आउटलाइन की मोटाई सेट करते हैं. इन संपत्तियों का प्रारूप समान है।

बाह्यरेखा-चौड़ाई: 20px;
बॉर्डर-चौड़ाई: 10px;

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

CSS बॉर्डर-शैली और रूपरेखा-शैली

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

सीमा-शैली: ठोस;
रूपरेखा-शैली: बिंदीदार;

आप इस लेख के अंत में विभिन्न CSS बॉर्डर और रूपरेखा शैलियों की पूरी सूची पा सकते हैं।

CSS बॉर्डर-कलर और आउटलाइन-कलर

अन्य रंग-आधारित CSS गुणों की तरह, बॉर्डर और रूपरेखा सभी CSS कानूनी रंगों को स्वीकार करते हैं। इसमें हेक्स कोड, आरजीबी कोड, आशुलिपि रंग और बहुत कुछ शामिल हैं।

बॉर्डर-रंग: नीला;
बाह्यरेखा रंग: #ff0000;

CSS बॉर्डर और रूपरेखा के साथ काम करते समय आप रंग ग्रेडियेंट का भी उपयोग कर सकते हैं।

सीएसएस सीमा संपत्ति मान

उनके साझा संपत्ति मूल्यों के साथ, सीमाओं और रूपरेखाओं का भी पता लगाने के लिए अद्वितीय मूल्य हैं। CSS बॉर्डर में दो अद्वितीय विशेषताएँ हैं जो सीखने योग्य हैं।

CSS बॉर्डर-त्रिज्या

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

सीमा-त्रिज्या: 20px;

आप सभी कोनों की त्रिज्या बदलने के लिए एक मान सेट कर सकते हैं।

आप कोनों को ऊपर बाएँ/नीचे दाएँ और ऊपर दाएँ/नीचे बाएँ के समूहों में भी विभाजित कर सकते हैं।

सीमा-त्रिज्या: 10px 20px;

इससे आपके HTML तत्वों के साथ दिलचस्प आकार बनाना आसान हो जाता है।

अंत में, आप प्रत्येक कोने को अपनी त्रिज्या रखने के लिए सेट कर सकते हैं।

सीमा-त्रिज्या: 10px 20px 30px 40px;

ये मान ऊपरी बाएँ कोने से प्रारंभ करते हुए दक्षिणावर्त लागू होते हैं।

सीएसएस बॉर्डर साइड गुण

रूपरेखाओं के विपरीत, आप सीमा के प्रत्येक पक्ष को इसकी कई संपत्तियों के लिए अद्वितीय मान रखने के लिए सेट कर सकते हैं। इससे आपके तत्व के प्रत्येक पक्ष को एक अलग चौड़ाई देना संभव हो जाता है।

बॉर्डर-लेफ्ट-चौड़ाई: 10px;
बॉर्डर-राइट-चौड़ाई: 20px;
बॉर्डर-टॉप-चौड़ाई: 30px;
बॉर्डर-बॉटम-चौड़ाई: 40px;

आप किसी तत्व के प्रत्येक पक्ष के लिए स्वतंत्र CSS बॉर्डर शैलियाँ भी सेट कर सकते हैं।

सीमा-बाएँ-शैली: ठोस;
बॉर्डर-राइट-स्टाइल: डॉटेड;
बॉर्डर-टॉप-स्टाइल: डैश्ड;
सीमा-नीचे-शैली: दोहरा;

और यदि आप चाहें तो आप प्रत्येक पक्ष का रंग बदल सकते हैं।

सीमा-बाएँ-शैली: नीला;
सीमा-दाएं-शैली: #ff0000;
सीमा-शीर्ष-शैली: #00ff00;
बॉर्डर-बॉटम-स्टाइल: आरजीबी (0, 0, 255);

सीएसएस सीमा पक्ष इस तरह गठबंधन करने के लिए नियमित आशुलिपि के साथ काम करते हैं।

बॉर्डर-लेफ्ट: 10px सॉलिड ब्लू;
सीमा-दाएँ: 20पीएक्स बिंदीदार #00ff00;
बॉर्डर-टॉप: 30px धराशायी #ff0000;
सीमा-तल: 40पिक्सल दोहराrgb(0, 0, 255);

सीएसएस रूपरेखा संपत्ति मान

CSS बॉर्डर्स की तरह, रूपरेखाओं की अपनी अनूठी संपत्ति होती है; रूपरेखा-ऑफसेट।

सीएसएस रूपरेखा-ऑफ़सेट

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

आउटलाइन-ऑफ़सेट: 10px;

यह आपके तत्वों के लिए तीसरी सीमा का उपयोग करने का एक अच्छा तरीका हो सकता है जो आपकी पृष्ठभूमि के रंग से मेल खाता हो।

CSS बॉर्डर और आउटलाइन शैलियाँ

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

सीमा-शैली: ठोस;
सीमा-शैली: बिंदीदार;
सीमा-शैली: धराशायी;
सीमा-शैली: नाली;
सीमा-शैली: रिज;
झालर की शैली: दोहरा;
सीमा-शैली: इनसेट;
सीमा-शैली: शुरुआत;
सीमा-शैली: छिपा हुआ;
सीमा-शैली: कोई नहीं;

बॉर्डर समान शैलियों को रूपरेखाओं के साथ साझा करते हैं, केवल संपत्ति के रूप में सेट की गई रूपरेखा-शैली के साथ।

CSS बॉर्डर और रूपरेखा का उपयोग कैसे करें

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