CSS Border Image

CSS Border Image का उपयोग border के रूप में image लगाने के लिए किया जाता है। यह property साधारण color या style वाले borders की जगह custom image-based borders बनाने की सुविधा देती है। Border Image का प्रयोग decorative layouts और advanced UI design में किया जाता है।

border-image Property

border-image एक shorthand property है जो कई sub-properties को combine करती है।

Related properties:

• border-image-source
• border-image-slice
• border-image-width
• border-image-outset
• border-image-repeat

Basic syntax:

selector {
  border-image: source slice / width / outset repeat;
}

border-image का Basic Example

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

यहाँ:

• url(border.png) image source है
• 30 slice value है
• round repeat behavior है

border देना जरूरी है ताकि border-image दिखाई दे।

border-image-source

border-image-source property से image define की जाती है।

div {
  border-image-source: url(border.png);
}

border-image-slice

border-image-slice यह तय करता है कि image को कितने हिस्सों में काटा जाए।

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

Percentage value भी दी जा सकती है:

div {
  border-image-slice: 20%;
}

border-image-width

border-image-width border की चौड़ाई को control करता है।

div {
  border-image-width: 10px;
}

यह value border-width से अलग भी हो सकती है।

border-image-outset

border-image-outset border को element के बाहर की ओर फैलाने के लिए उपयोग होता है।

div {
  border-image-outset: 5px;
}

border-image-repeat

border-image-repeat यह तय करता है कि image slices कैसे repeat हों।

Main values:

• stretch
• repeat
• round
• space

Example:

div {
  border-image-repeat: round;
}

Complete border-image Example

div {
  border: 12px solid transparent;
  border-image-source: url(border.png);
  border-image-slice: 40;
  border-image-repeat: stretch;
}

border-image के बिना border क्यों जरूरी है

अगर border या border-width define नहीं किया गया है, तो border-image दिखाई नहीं देगा।

गलत उदाहरण:

div {
  border-image: url(border.png) 30 round;
}

सही उदाहरण:

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

border-image का Practical Use

• Decorative frames बनाने के लिए
• Certificates और badges design करने के लिए
• Special UI sections highlight करने के लिए
• Custom themed layouts के लिए

CSS Border Image advanced border styling के लिए एक powerful और flexible feature है।