CSS बॉर्डर
भरना, फोटो, ग्रेडिएंट और नरम फीकापन आप जानते हैं। अगला कौशल: बॉक्स का किनारा खींचें। बॉर्डर (border) वह रेखा है जो तत्व को फ्रेम करती है — कार्ड, बटन, फ़ील्ड और पैनल इसी पर टिके रहते हैं।
बॉर्डर क्या है?
CSS बॉर्डर तत्व के बॉक्स के किनारे पर बैठता है। इसके तीन भाग हैं: चौड़ाई (मोटाई), स्टाइल (रूप — ठोस, डैश आदि), और रंग। स्टाइल भूल गए तो अक्सर चौड़ाई होने पर भी उपयोगी रेखा नहीं दिखती।
तीन भाग
हर बॉर्डर को छोटी रेसिपी समझें: मोटाई + रूप + रंग।
लंबा रूप: चौड़ाई, स्टाइल, रंग
css.card {
border-width: 2px;
border-style: solid;
border-color: #0f766e;
padding: 1rem;
background-color: #f0fdfa;
}स्टाइल क्यों ज़रूरी है
केवल border-width काफी नहीं। शुरुआती none के अलावा border-style के बिना अक्सर रेखा नहीं दिखती। पहले solid से शुरू करें; फिर और स्टाइल आज़माएँ।
शॉर्टकट: तीन की जगह एक पंक्ति
border शॉर्टकट चौड़ाई, स्टाइल और रंग एक साथ लेता है। रोज़मर्रा का आम क्रम: चौड़ाई → स्टाइल → रंग।
border शॉर्टकट
css.panel {
border: 2px solid #0f766e;
padding: 1rem;
background-color: #ecfeff;
}आम बॉर्डर स्टाइल
स्टाइल रेखा का स्वभाव है। पहले छोटा रोज़ाना सेट याद रखें।
📊 आम border-style मान
| कीवर्ड | रूप | रोज़ाना उपयोग |
|---|---|---|
solid |
लगातार रेखा | कार्ड, बटन, फ़ॉर्म फ़ील्ड |
dashed |
छोटे डैश | प्लेसहोल्डर, ड्रॉप ज़ोन संकेत |
dotted |
बिंदु | नरम विभाजक, हल्के फ्रेम |
double |
दो समानांतर रेखाएँ | सजावटी ज़ोर (कम इस्तेमाल) |
none |
कोई बॉर्डर नहीं | रीसेट / किनारा हटाना |
hidden |
टेबल बॉर्डर collapse में none जैसा | टेबल बाद में — नाम जानें |
कई स्टाइल साथ-साथ
एक ही चौड़ाई और रंग; केवल स्टाइल बदलता है।
solid, dashed, dotted, double
css.box-solid { border: 3px solid #134e4a; }
.box-dashed { border: 3px dashed #134e4a; }
.box-dotted { border: 3px dotted #134e4a; }
.box-double { border: 3px double #134e4a; }एक तरफ़ एक बार
ऊपर, दाएँ, नीचे और बाएँ अलग स्टाइल कर सकते हैं — अंडरलाइन, बायाँ ऐक्सेंट बार या असमान कार्ड के लिए उपयोगी।
हर तरफ़ बॉर्डर
css.quote {
border-top: none;
border-right: none;
border-bottom: none;
border-left: 4px solid #0f766e;
padding: 0.75rem 1rem;
background-color: #f8fafc;
}एक तरफ़ का शॉर्टकट
border-left: 4px solid #0f766e रोज़ाना तरीका है: एक किनारा सेट करें, बाकी न छुएँ।
रोज़ाना कार्ड आदत
पतला बॉर्डर + पैडिंग + नरम भराव साफ़ कार्ड जैसा लगता है, बिना शोर के।
साधारण बॉर्डर वाला कार्ड
css.card {
border: 1px solid #cbd5e1;
border-radius: 0; /* गोलाई अगला पाठ है — यहाँ कोने सीधे रखें */
padding: 1rem;
background-color: #ffffff;
color: #0f172a;
}बॉर्डर हटाना
साफ़ करने के लिए border: none (या border-style: none) चुनें। केवल border-color: transparent कभी-कभी जगह छोड़ता है — none साफ़ रीसेट है।
border none से रीसेट
css.plain {
border: none;
}खुद आज़माएँ
border-width,border-style: solidऔर टीलग्रीनborder-colorवाला कार्ड।- वही रूप
border: 2px solid #0f766eसे लिखें। - चार बॉक्स: solid, dashed, dotted और double — एक ही मोटाई।
- सिर्फ़ मोटे बाएँ बॉर्डर वाला कोट ब्लॉक।
- बॉर्डर वाले बटन से शुरू करें;
border: noneसे किनारा हटाएँ।
आम गलतियाँ
- चौड़ाई और रंग लगाना,
border-styleभूल जाना (कुछ नहीं दिखता) - border (खींची रेखा) को margin (बाहर का गैप) से मिलाना — अलग उपकरण
- केवल
borderसे गोल कोने चाहना — वहborder-radiusहै (अगला पाठ) - हर तरफ़ बिना वजह चटकीला रंग
- मोटा पारदर्शी बॉर्डर छोड़ना जब मतलब
border: noneथा
सार
- बॉर्डर को चौड़ाई, स्टाइल और रंग चाहिए
border: 2px solid #0f766eरोज़ाना शॉर्टकट है- पहले
solid,dashed,dotted,doubleऔरnoneसीखें - डिज़ाइन माँगे तो तरफ़ें अलग स्टाइल करें
border: noneसे साफ़ रीसेट करें- अभी कोने सीधे — गोलाई अगले पाठ में
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी