CSS Borders

CSS Borders का उपयोग HTML elements के चारों ओर border (किनारा) लगाने के लिए किया जाता है। Borders से हम किसी element की सीमा को visually define कर सकते हैं, उसे highlight कर सकते हैं और layout को बेहतर बना सकते हैं।

CSS में border को control करने के लिए कई properties उपलब्ध हैं जैसे border-style, border-width, border-color और shorthand border।

CSS Border Style

border-style property यह निर्धारित करती है कि border किस प्रकार का होगा। Border दिखाई देने के लिए border-style का होना आवश्यक है।

मुख्य border styles:

• solid – सीधी लाइन
• dotted – डॉटेड लाइन
• dashed – डैश वाली लाइन
• double – डबल लाइन
• groove – 3D groove effect
• ridge – 3D ridge effect
• inset – अंदर की ओर दबा हुआ
• outset – बाहर की ओर उभरा हुआ
• none – कोई border नहीं
• hidden – hidden border

Example:

p {
  border-style: solid;
}

Multiple sides के लिए अलग-अलग style भी दी जा सकती है:

div {
  border-style: solid dotted dashed double;
}

Order होता है: top, right, bottom, left

CSS Border Width

border-width property से border की मोटाई तय की जाती है।

Values हो सकती हैं:

• thin
• medium
• thick
• Length values जैसे 1px, 5px, 10px

Example:

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

Different sides के लिए अलग-अलग width:

div {
  border-style: solid;
  border-width: 5px 10px 2px 8px;
}

CSS Border Color

border-color property से border का रंग तय किया जाता है।

Color define करने के तरीके:

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

Example:

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

Multiple colors for different sides:

div {
  border-style: solid;
  border-color: red green blue black;
}

CSS Border Shorthand

border shorthand property का उपयोग करके width, style और color एक ही line में define किए जा सकते हैं।

Syntax:

border: border-width border-style border-color;

Example:

p {
  border: 2px solid blue;
}

यह सबसे ज्यादा इस्तेमाल होने वाला तरीका है।

CSS Individual Borders

CSS में हर side के border को अलग-अलग control किया जा सकता है।

Properties:

• border-top
• border-right
• border-bottom
• border-left

Example:

div {
  border-top: 5px solid red;
  border-right: 3px dashed blue;
  border-bottom: 4px solid green;
  border-left: 2px dotted black;
}

CSS Rounded Borders

border-radius property से border को rounded किया जाता है।

Example:

div {
  border: 2px solid black;
  border-radius: 10px;
}

Circle बनाने के लिए:

img {
  border-radius: 50%;
}

CSS Border Collapse (Table Borders)

Tables में borders को merge करने के लिए border-collapse property का उपयोग होता है।

Example:

table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
}

collapse से adjacent borders एक single border बन जाते हैं।

CSS Border Image

border-image property से image को border के रूप में इस्तेमाल किया जा सकता है।

Basic example:

div {
  border: 10px solid transparent;
  border-image: url(border.png) 30 round;
}

यह advanced usage के लिए होती है और modern browsers में supported है।

CSS Borders का Practical Use

• Buttons और cards को highlight करने के लिए
• Forms में input fields को अलग दिखाने के लिए
• Layout structure समझाने के लिए
• Hover effects बनाने के लिए

Example hover effect:

button {
  border: 2px solid blue;
}

button:hover {
  border-color: red;
}

CSS Borders layout design का एक महत्वपूर्ण हिस्सा हैं और सही तरीके से इस्तेमाल करने पर website को professional और attractive बनाते हैं।