पाठ 7, कुल 30 में

CSS बॉर्डर

4 मिनट पढ़ें · मुफ़्त · बिना लॉगिन

English हिंदी

CSS बैकग्राउंड CSS मार्जिन

Border एक element के चारों ओर खींची गई line है, जो उसकी padding और margin के बीच बैठती है। Borders cards, buttons और boxes को दिखने लायक बनाते हैं — बिना border के, सफ़ेद पेज पर सफ़ेद card दिखता ही नहीं। CSS आपको पूरा नियंत्रण देता है: line की style, उसकी मोटाई, उसका रंग, और हर side अलग-अलग।

Diagram — देखें, यह सब कैसे जुड़ता है

सिंटैक्स — border के तीन हिस्से

Border के लिए तीन चीज़ें चाहिए: एक style (किस तरह की line), एक width (कितनी मोटी), और एक रंग। आप उन्हें तीन properties के रूप में लिख सकते हैं, या एक साथ shorthand में।

.card {
  border-style: solid;
  border-width: 2px;
  border-color: #f59e0b;
}
/* The same border, in one line: */
.card {
  border: 2px solid #f59e0b;
}

Note: Style ही वह हिस्सा है जो सच में ज़रूरी है। अगर आप border-width: 2px; border-color: red; लिखें पर style न लिखें, तो कुछ दिखता ही नहीं — डिफ़ॉल्ट style none है। यही border की सबसे आम गलती है: border code में "है" पर पेज पर दिखता नहीं।

Border styles — कैसी दिखती है

Style	कैसी दिखती है
`solid`	एक सीधी line — रोज़ का चुनाव।
`dashed`	डैश वाली line, जैसे coupon का किनारा।
`dotted`	बिंदुओं वाली line।
`double`	दो पतली lines साथ-साथ।
`groove` / `ridge`	खुदा हुआ या उभरा हुआ 3D look।
`none`	कोई border नहीं — डिफ़ॉल्ट।

हर side अलग-अलग

आप एक side को अलग से style कर सकते हैं — underline effect के लिए या notice box के बाईं ओर रंगीन किनारे के लिए।

.notice {
  border-left: 5px solid green;
  border-top: 1px solid #ccc;
}
.box {
  border-radius: 12px;
}

border-left, border-right, border-top और border-bottom — हर एक shorthand वाली तीनों values लेता है। और border-radius कोनों को गोल करता है: 12px जैसा छोटा value हल्के गोल कोने देता है, और 50% एक square को perfect circle बना देता है — गोल profile photo के पीछे यही trick है।

Outline — border का चचेरा भाई

outline border जैसा दिखता है, पर यह border के बाहर खींचा जाता है, और यह कोई जगह नहीं लेता — यह दूसरे elements को कभी धक्का नहीं देता। इसीलिए यह focus rings के लिए perfect है: वह रंगीन घेरा जो आप Tab दबाने पर button या form field के चारों ओर देखते हैं।

button:focus {
  outline: 3px solid blue;
}

Tip: किसी साइट से outlines कभी मत हटाइए, जब तक उसकी जगह कोई और दिखने वाला focus style न दें। Keyboard users outline से ही navigate करते हैं — उसके बिना वे देख ही नहीं सकते कि पेज पर वे कहाँ हैं।

Box shadow — बिना border के गहराई

box-shadow element के पीछे हल्की छाया डालता है, जिससे वह पेज से उठा हुआ लगता है — classic card look। Values हैं: horizontal offset, vertical offset, blur, और रंग।

.card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

इसे ऐसे पढ़िए: कोई sideways shift नहीं, 4 pixel नीचे, 12 pixel blur, हल्के काले रंग में जो 20% opaque है। Shadows layout में कुछ खर्च नहीं करतीं — outlines की तरह, वे कुछ भी धक्का नहीं देतीं।

आम गलतियाँ

Width और रंग तय करना, पर style नहीं — border दिखता नहीं, क्योंकि डिफ़ॉल्ट style none है।
border: solid; लिखकर रंग की उम्मीद करना — बिना रंग के, border text का रंग ले लेता है, जो अक्सर वह नहीं होता जो आप चाहते थे।
आयत पर border-radius: 50% इस्तेमाल करना — आपको oval मिलेगा, circle नहीं। Circle के लिए पहले square element चाहिए।
outline: none; से outlines हटाना और keyboard users को बदले में कुछ न देना।
यह भूल जाना कि border element के आकार में जुड़ता है — 2px border वाला 300px box 304px चौड़ा हो जाता है, जब तक box-sizing: border-box न हो।

याद रखें

Border = style + width + रंग — और style वह है जिसे कभी नहीं भूलना।
Shorthand: border: 2px solid red; तीनों एक साथ तय करता है।
border-left / right / top / bottom सिर्फ एक side को style करते हैं।
border-radius कोने गोल करता है; square पर 50% circle बनाता है।
Outline border के बाहर बैठता है और कोई जगह नहीं लेता; box-shadow layout को छुए बिना गहराई देता है।

उदाहरण समझिए

.profile { border: 3px solid #2563eb; border-radius: 12px; } — profile card को ठोस नीली border और हल्के गोल कोने मिलते हैं।
.avatar { border-radius: 50%; } — फोटो square है, इसलिए 50% radius उसे perfect circle बना देता है।
.coupon { border: 2px dashed #dc2626; } — डैश वाली लाल border, जैसे काग़ज़ के coupon का फटा हुआ किनारा।
.card { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } — card के नीचे हल्की छाया, जिससे वह पेज से उठा हुआ लगता है।
button:focus { outline: 3px solid #2563eb; } — जब button keyboard से focus होता है, तो उसके चारों ओर नीला घेरा दिखता है।

उदाहरण

Example

<!DOCTYPE html>
<html>
<head>
<title>Student Profile Card</title>
<style>
body { font-family: Verdana, sans-serif; background-color: #f1f5f9; }
.profile { border: 3px solid #2563eb; border-radius: 12px; background-color: white; width: 300px; padding: 20px; margin: 20px auto; text-align: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }
.avatar { border-radius: 50%; border: 2px solid #2563eb; width: 100px; height: 100px; background-color: #dbeafe; line-height: 100px; margin: 0 auto; }
.coupon { border: 2px dashed #dc2626; padding: 10px; margin-top: 16px; color: #dc2626; }
button { padding: 10px 20px; margin-top: 16px; }
button:focus { outline: 3px solid #2563eb; }
</style>
</head>
<body>

<div class="profile">
<div class="avatar">RK</div>
<h2>Raj Kamal</h2>
<p>Student — Diploma in CSE</p>
<div class="coupon">50% OFF on summer training</div>
<button>Enrol Now</button>
</div>

</body>
</html>

परिणाम

परिणाम — ब्राउज़र में यह कैसा दिखता है

खुद करके देखें — लाइव एडिटर

नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।

पूरे एडिटर में खोलें

परिणाम

खुद क्यों सीखें — AI से पूछने के बजाय?

AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।