डेवलपर अपने वेब पेजों को अधिक आकर्षक बनाने के लिए कई CSS गुण लागू कर सकते हैं, जैसे “ ऊंचाई ' और ' चौड़ाई 'आकार सेट करने के लिए गुण,' पाठ संरेखित 'पाठ समायोजित करने के लिए,' झालर की शैली ' और ' बॉर्डर-त्रिज्या ”तत्व के चारों ओर सीमा निर्धारित करने के लिए गुण। इसके अतिरिक्त, आप अपनी आवश्यकताओं के अनुसार सीमा जोड़ सकते हैं, जैसे तत्व के एक तरफ, केवल वस्तुओं के पीछे की चीजों को और अधिक दृश्यमान बनाने के लिए।
यह पोस्ट प्रदर्शित करेगी:
विधि 1: एक तरफ बॉर्डर सेट करें
सीएसएस में, उपयोगकर्ता वांछित तत्व के एक तरफ सीमा निर्धारित कर सकते हैं। इस उद्देश्य के लिए, ' बॉर्डर-बायां ”, “ बॉर्डर-दायां ”, “ बॉर्डर-शीर्ष ' और ' सीमा-नीचे ” गुणों का उपयोग बाएँ, दाएँ, ऊपर या नीचे की ओर बॉर्डर जोड़ने के लिए किया जाता है।
इस खंड में, हम विशेष रूप से कंटेनर के बाईं ओर बॉर्डर सेट करेंगे। ऐसा करने के लिए, नीचे दिए गए निर्देशों का पालन करें।
चरण 1: एक div कंटेनर बनाएँ
सबसे पहले, 'की मदद से एक div कंटेनर बनाएं' <दिव> ' उपनाम। एक 'डालें पहचान ” विशेषता और आईडी को एक नाम दें।
चरण 2: शीर्षक डालें
अगला, '<का उपयोग करें h1> ' टैग div कंटेनर के अंदर एक शीर्षक जोड़ने के लिए। इसके अलावा आप आवश्यकता के अनुसार अन्य Heading Tags का भी उपयोग कर सकते हैं, जैसे कि “< h1> 'से'< एच6> 'टैग:
< डिव पहचान = 'मेन-डिव' >< एच 1 > एक तरफ सीमा एच 1 >
डिव >
यह देखा जा सकता है कि कंटेनर सफलतापूर्वक बनाया गया है:
चरण 3: डिव कंटेनर तक पहुंचें
अब, HTML div कंटेनर को एक्सेस करें, और क्लास के नाम को एक्सेस करें। ऐसा करने के लिए, एक वर्ग चयनकर्ता ' # ” वर्ग नाम के साथ प्रयोग किया जाता है।
स्टेप 4: केवल एक तरफ बॉर्डर डालें
Div कंटेनर तक पहुँचने के बाद, नीचे उल्लिखित CSS गुण लागू करें:
#मुख्य-विभाग{बॉर्डर-लेफ्ट: 5px सॉलिड लाल ;
पृष्ठभूमि: आरजीबी ( 56 , 239 , 245 ) ;
मार्जिन: 20px 100px;
चौड़ाई: 200 पीएक्स; ऊंचाई: 150 पीएक्स
}
यहाँ:
-
- ' बॉर्डर-बायां सीमा-बाएँ चौड़ाई, शैली और रंग सेट करने के लिए एक आशुलिपि गुण है।
- ' पृष्ठभूमि ” संपत्ति का उपयोग तत्व की पृष्ठभूमि के रंग को समायोजित करने के लिए किया जाता है।
- ' अंतर 'गुण सीमा के बाहर स्थान निर्धारित करते हैं।
- ' चौड़ाई 'एक कंटेनर में तत्व की चौड़ाई के आकार को परिभाषित करता है।
परिणामी छवि सीमा को केवल एक तरफ दिखाती है:
विधि 2: अलग-अलग स्टाइल के साथ सभी तरफ बॉर्डर सेट करें
अलग-अलग रंगों के साथ सभी तरफ बॉर्डर सेट करने के लिए ऊपर दिए गए HTML कोड का उपयोग करें। फिर, आईडी नाम और चयनकर्ता की सहायता से div कंटेनर तक पहुंचें:
#मुख्य-विभाग{मार्जिन: 80 पीएक्स;
बॉर्डर-चौड़ाई: 8px 2px 1px 10px;
सीमा-त्रिज्या: 50 पीएक्स;
बॉर्डर-स्टाइल: इनसेट सॉलिड डबल डॉटेड;
सीमा-रंग: आरजीबी ( 40 , 5 , 235 ) rgb ( 238 , 146 , 9 ) rgb ( 255 , 0 , 242 ) rgb ( 19 , 19 , 18 ) ;
}
ऊपर दिए गए कोड में:
-
- ' अंतर 'तत्व के बाहर रिक्त स्थान निर्दिष्ट करता है।
- ' सीमा चौड़ाई ” प्रत्येक पक्ष के लिए अलग-अलग मानों के साथ चौड़ाई सेट करता है। उदाहरण के लिए, हमने पिक्सेल में अलग-अलग मान जोड़े हैं।
- ' बॉर्डर-त्रिज्या ” का उपयोग सीमा के गोल वक्र बनाने के लिए किया जाता है।
- ' झालर की शैली “संपत्ति का उपयोग सीमा की शैली निर्धारित करने के लिए किया जाता है। इस परिदृश्य में, बॉर्डर के प्रत्येक पक्ष के लिए चार अलग-अलग प्रकार की शैलियाँ सेट की जाती हैं।
- ' सीमा रंग “संपत्ति का उपयोग सीमा पर रंग आवंटित करने के लिए किया जाता है। यहां, प्रत्येक पक्ष का मान एक अलग रंग के रूप में सेट किया गया है।
नतीजतन, प्रत्येक तरफ विभिन्न शैलियों वाली सीमा लागू की जाएगी:
इस लेख में, आपने CSS बॉर्डर को एक और कई पक्षों पर सेट करने के विभिन्न तरीके सीखे हैं।
निष्कर्ष
सीमा को केवल एक तरफ सेट करने के लिए, पहले 'का उपयोग करके एक div बनाएं' <दिव> ' तत्व। अगला, div कंटेनर तक पहुंचें और CSS गुणों को लागू करें। उसके बाद, इनमें से किसी भी संपत्ति का उपयोग करें, जिसमें 'सहित' बॉर्डर-बायां ”, “ बॉर्डर-दायां ”, “ बॉर्डर-शीर्ष ' और ' सीमा-नीचे ” एक तरफ की सीमा निर्धारित करने के लिए। इसके अलावा, उपयोगकर्ता '' भी सेट कर सकते हैं सीमा चौड़ाई ”, “ झालर की शैली ' और ' सीमा रंग ” सीमा के प्रत्येक तरफ अलग से। इस पोस्ट में CSS बॉर्डर को केवल एक तरफ सेट करने की विधि के बारे में बताया गया है।