CSS Border Width

CSS Border Width का उपयोग border की मोटाई तय करने के लिए किया जाता है। यह property यह निर्धारित करती है कि किसी HTML element के चारों ओर लगा border कितना मोटा या पतला दिखाई देगा। border-width का प्रभाव तभी दिखता है जब border-style पहले से defined हो।

border-width Property

border-width property से border की thickness सेट की जाती है।

Basic syntax:

selector {
  border-width: value;
}

border-width के Values

Predefined Values

CSS कुछ predefined values प्रदान करता है:

• thin
• medium
• thick

Example:

p {
  border-style: solid;
  border-width: thin;
}

div {
  border-style: solid;
  border-width: thick;
}

इन values का exact size browser पर निर्भर करता है।

Length Values

सबसे अधिक उपयोग length values का होता है, जैसे:

• px
• em
• rem

Example:

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

div {
  border-style: solid;
  border-width: 0.5em;
}

Four Sides के लिए अलग-अलग Border Width

border-width में चार values देकर हर side की width अलग-अलग तय की जा सकती है।

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

Example:

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

इसका अर्थ:

• top: 5px
• right: 10px
• bottom: 2px
• left: 8px

Two और Three Values का Usage

Two values:

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

यहाँ:

• top और bottom: 5px
• left और right: 10px

Three values:

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

यहाँ:

• top: 5px
• left और right: 10px
• bottom: 2px

Individual Border Width Properties

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

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;
}

border-style के बिना border-width

अगर केवल border-width दिया जाए और border-style नहीं दिया जाए, तो border दिखाई नहीं देगा।

गलत उदाहरण:

p {
  border-width: 3px;
}

सही उदाहरण:

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

border-width का Practical Use

• Cards और boxes को visually balance करने के लिए
• Important sections को highlight करने के लिए
• Buttons और input fields की appearance control करने के लिए
• Hover effects में border thickness बदलने के लिए

Example hover effect:

button {
  border-style: solid;
  border-width: 1px;
}

button:hover {
  border-width: 3px;
}

CSS Border Width layout और design में border की visual strength तय करने का एक महत्वपूर्ण tool है।