CSS Border Properties

CSS Border Properties का उपयोग किसी HTML element के चारों तरफ border (किनारा) लगाने और उसके style, width और color को define करने के लिए किया जाता है।

हम लगभग किसी भी HTML element जैसे <div>, <p>, <h1> आदि पर border apply कर सकते हैं।

CSS में मुख्य रूप से 3 Border Properties होती हैं:

1. border-style → Border की line का type बताता है।
2. border-width → Border कितना मोटा या पतला होगा, यह बताता है।
3. border-color → Border का color define करता है।

इसके अलावा एक shorthand property border भी होती है, जिसकी मदद से तीनों properties को एक साथ set किया जा सकता है।

---

1. border-style

border-style property यह बताती है कि border की line किस प्रकार की होगी।

उदाहरण के लिए border solid, dotted, dashed आदि हो सकता है।

Syntax:

p {
  border-style: solid;
}

Common Values:

• solid → सीधी और continuous line
• dotted → छोटे-छोटे dots
• dashed → छोटी-छोटी dashed lines
• double → दो lines
• none → कोई border नहीं
• groove → 3D effect वाली line
• ridge → 3D ridge effect
• inset → अंदर की ओर 3D effect
• outset → बाहर की ओर 3D effect

Important: Border को visible करने के लिए सामान्यतः border-style का कोई visible value जैसे solid देना जरूरी होता है। केवल border-width या border-color देने से border दिखाई नहीं दे सकता।

---

2. border-width

border-width property border की thickness (मोटाई) को define करती है।

आप इसे px, em जैसी units में या predefined values के साथ set कर सकते हैं।

Named Values:

• thin → पतला border
• medium → medium thickness
• thick → मोटा border

Syntax:

p {
  border-style: solid;
  border-width: 5px;
}

इस example में paragraph का border 5px thick होगा।

---

3. border-color

border-color property border का color define करती है।

Color देने के लिए अलग-अलग CSS color formats का उपयोग कर सकते हैं:

• Color name → red
• HEX → #ff0000
• RGB → rgb(255, 0, 0)
• HSL → hsl(0, 100%, 50%)

Syntax:

p {
  border-style: solid;
  border-color: red;
}

इस example में paragraph का border red color का होगा।

---

🔹 Clockwise Rule

border-color, border-style और border-width — इन तीनों properties में 1 से 4 values दी जा सकती हैं।

जब 4 values दी जाती हैं, तो values clockwise direction में apply होती हैं:

Top → Right → Bottom → Left

यानी:

p {
  border-width: 1px 2px 3px 4px;
}

इसका मतलब:

• 1px → Top
• 2px → Right
• 3px → Bottom
• 4px → Left

अगर 1, 2, 3 या 4 values हों:

1 Value:

border-width: 5px;

चारों sides पर 5px लागू होगा।

2 Values:

border-width: 5px 10px;

• Top + Bottom → 5px
• Left + Right → 10px

3 Values:

border-width: 5px 10px 15px;

• Top → 5px
• Left + Right → 10px
• Bottom → 15px

4 Values:

border-width: 5px 10px 15px 20px;

• Top → 5px
• Right → 10px
• Bottom → 15px
• Left → 20px

यही 1–4 value rule border-color और border-style पर भी लागू होता है।

---

🔹 border Shorthand Property

border एक shorthand property है। इसकी मदद से हम border-width, border-style और border-color को एक ही line में define कर सकते हैं।

Syntax:

p {
  border: 2px solid red;
}

यहाँ:

• 2px → border-width
• solid → border-style
• red → border-color

इसलिए अलग-अलग तीन properties लिखने के बजाय हम एक ही border property का उपयोग कर सकते हैं।

---

🧾 CSS border-radius Property

border-radius property का उपयोग किसी element के corners (कोनों) को rounded बनाने के लिए किया जाता है।

इससे element के चारों corners पर curved/rounded effect आता है।

Syntax:

h1 {
  border: 2px solid red;
  border-radius: 2px;
}

यहाँ:

• border: 2px solid red; → 2px का solid red border बनाएगा।
• border-radius: 2px; → element के corners को थोड़ा rounded करेगा।

अगर border-radius की value बढ़ाई जाए, तो corners अधिक rounded दिखाई देंगे।

उदाहरण:

h1 {
  border: 2px solid red;
  border-radius: 20px;
}

यहाँ corners 2px की तुलना में ज्यादा rounded होंगे।

Simple याद रखने का तरीका:

border → Border लगाता है
border-width → Border की मोटाई
border-style → Border की line का type
border-color → Border का color
border-radius → Border के corners को rounded करता है