CSS Individual Borders

CSS Individual Borders का उपयोग तब किया जाता है जब किसी element की हर side पर अलग-अलग border लगाना हो। इसके माध्यम से top, right, bottom और left border को independently control किया जा सकता है। यह complex layouts और custom UI designs में बहुत उपयोगी होता है।

Individual Border Properties

CSS हर side के लिए अलग-अलग border properties प्रदान करता है।

Main properties:

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

इन properties के साथ width, style और color एक साथ define किए जा सकते हैं।

border-top

border-top property element की top side का border सेट करती है।

div {
  border-top: 4px solid red;
}

border-right

border-right property right side का border सेट करती है।

div {
  border-right: 3px dashed blue;
}

border-bottom

border-bottom property bottom side का border सेट करती है।

div {
  border-bottom: 5px solid green;
}

border-left

border-left property left side का border सेट करती है।

div {
  border-left: 2px dotted black;
}

Individual Border Width

हर side की width को अलग-अलग भी define किया जा सकता है।

Properties:

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

Example:

div {
  border-style: solid;
  border-top-width: 5px;
  border-right-width: 3px;
  border-bottom-width: 4px;
  border-left-width: 2px;
}

Individual Border Style

हर side के लिए अलग-अलग style भी set की जा सकती है।

Properties:

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

Example:

div {
  border-top-style: solid;
  border-right-style: dotted;
  border-bottom-style: dashed;
  border-left-style: double;
}

Individual Border Color

हर side के लिए अलग-अलग color define किया जा सकता है।

Properties:

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

Example:

div {
  border-style: solid;
  border-top-color: red;
  border-right-color: green;
  border-bottom-color: blue;
  border-left-color: black;
}

Shorthand और Individual Borders का Combination

Shorthand border और individual borders को एक साथ इस्तेमाल किया जा सकता है। CSS cascade rule के अनुसार last defined property apply होती है।

Example:

div {
  border: 2px solid gray;
  border-bottom: 5px solid red;
}

इसमें:

• top, right और left पर gray border होगा
• bottom पर red border होगा

Individual Borders का Practical Use

• Card design में header और footer highlight करने के लिए
• Table rows और columns को visually अलग करने के लिए
• Navigation menus में active side indicate करने के लिए
• Timeline और step-based layouts बनाने के लिए

Example active state:

.menu-item {
  border-left: 4px solid transparent;
}

.menu-item.active {
  border-left: 4px solid blue;
}

CSS Individual Borders detailed layout control के लिए एक powerful feature है।