CSS Border Shorthand

CSS Border Shorthand का उपयोग border-width, border-style और border-color को एक ही property में define करने के लिए किया जाता है। यह CSS को short, clean और readable बनाता है। Shorthand का उपयोग करने से code maintain करना आसान हो जाता है।

border Property

border एक shorthand property है जो एक line में border की पूरी definition देती है।

Basic syntax:

selector {
  border: border-width border-style border-color;
}

Border Shorthand का Basic Example

p {
  border: 2px solid red;
}

इस example में:

• 2px border-width है
• solid border-style है
• red border-color है

border में Order का Rule

border shorthand में values का order fixed नहीं होता। Browser अपने आप पहचान लेता है कि कौन सी value width है, कौन सी style है और कौन सी color है।

ये सभी valid examples हैं:

div {
  border: solid 3px blue;
}

div {
  border: blue solid 3px;
}

div {
  border: 3px blue solid;
}

border-style का होना जरूरी

Shorthand में भी border-style का होना जरूरी है। अगर style नहीं दिया गया, तो border दिखाई नहीं देगा।

गलत उदाहरण:

p {
  border: 2px red;
}

सही उदाहरण:

p {
  border: 2px solid red;
}

border Shorthand से Default Values

अगर shorthand में कोई value omit की जाती है, तो browser default value apply करता है।

Example:

div {
  border: solid red;
}

यहाँ:

• border-style: solid
• border-color: red
• border-width: medium (default)

Individual Borders के लिए Shorthand

CSS में हर side के लिए भी shorthand available है।

Properties:

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

Example:

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

Shorthand और Individual Properties का Relation

अगर shorthand और individual properties दोनों लिखी जाती हैं, तो CSS cascade और order के अनुसार last defined rule apply होती है।

Example:

div {
  border: 2px solid red;
  border-left: 5px dashed blue;
}

इसमें:

• सभी sides पर red solid border होगा
• left side पर blue dashed border होगा

border Shorthand का Practical Use

• Buttons और cards के लिए quick styling
• Reusable components बनाने के लिए
• Clean और optimized CSS लिखने के लिए
• Hover और focus effects में fast changes के लिए

Example hover effect:

button {
  border: 2px solid #333;
}

button:hover {
  border: 2px dashed #333;
}

CSS Border Shorthand efficient और professional CSS लिखने का एक essential तरीका है।