CSS Border Images
In this page:
selector {
border-image: source slice / width / outset repeat;
}border-image Shorthand
border-image एक shorthand है जो एक source image, वह कैसे sliced है, उसकी rendered width, और sliced pieces edges के साथ कैसे repeat या stretch होते हैं, इन सबको combine करता है, एक plain solid/dashed border को एक graphic border से replace करते हुए।
- Accepted values:
- border-image-source — url() या एक gradient
- border-image-slice — number या percentage, optionally fill के साथ
- border-image-width — length, number, या auto
- border-image-outset — length या number
- border-image-repeat — stretch | repeat | round | space
उदाहरण: The border-image Shorthand
<style>
.box {
border: 20px solid transparent;
border-image: linear-gradient(45deg, red, blue) 20;
}
</style>
<div class="box">Graphic border instead of solid or dashed</div>border-image-source
border-image-source बताता है कि कौन-सी image इस्तेमाल करनी है, जो एक raster image URL या यहाँ तक कि एक CSS gradient भी हो सकती है -- simple decorative borders के लिए gradients किसी असली image file का एक common lightweight alternative हैं।
- Accepted values:
- url("...") — एक image file
- linear-gradient() — border के रूप में इस्तेमाल किया गया एक gradient
- radial-gradient() — एक radial gradient border
- none — कोई border image नहीं (initial value)
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: border-image-source
<style>
.box {
border: 20px solid transparent;
border-image-source: linear-gradient(90deg, orange, purple);
border-image-slice: 20;
}
</style>
<div class="box">Gradient used as the border source</div>border-image-slice
border-image-slice source image को चार inward offsets (top, right, bottom, left) इस्तेमाल करके एक 3x3 grid में बाँटता है, जिससे चार corner pieces (कभी stretch नहीं होते), चार edge pieces (एक axis के साथ stretch या repeat होते हैं), और एक center piece (सिर्फ fill keyword जोड़ने पर इस्तेमाल होता है) बनते हैं।
- Accepted values:
- number — हर edge से काटे गए pixels (या SVG units), जैसे 30
- percentage — image size के relative
- fill — middle slice भी रखता है
- एक से चार values — top, right, bottom, left order
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: border-image-slice
<style>
.box {
border: 20px solid transparent;
border-image-source: url('https://placehold.co/60x60');
border-image-slice: 20 20 20 20;
}
</style>
<div class="box">Image sliced into a 3x3 grid</div>border-image-width और Outset
border-image-width underlying border-width से independently border-image की rendered thickness control करता है, और border-image-outset image को decorative overhang effects के लिए element के normal border box से बाहर फैलने देता है।
- Accepted values:
- number — border-width का multiple (border-image-width)
- length — जैसे 20px
- percentage — border image area के relative
- auto — slice का intrinsic size
- border-image-outset — image को border box से बाहर फैलाता है (number या length)
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: border-image-width and Outset
<style>
.box {
border: 10px solid transparent;
border-image-source: url('https://placehold.co/60x60');
border-image-slice: 20;
border-image-width: 15px;
border-image-outset: 5px;
}
</style>
<div class="box">Rendered thickness and overhang set independently</div>border-image-repeat: stretch बनाम round बनाम repeat
repeat keyword control करता है कि edge pieces corners के बीच की जगह कैसे भरते हैं: stretch उन्हें scale करता है (distort हो सकता है), repeat उन्हें tile करता है (boundary पर clip हो सकता है), और round उन्हें tile करते हुए थोड़ा scale करता है ताकि बिना clip हुए एक पूरी संख्या में copies fit हो जाएँ।
- Accepted values:
- stretch — slices को fit करने के लिए stretch किया जाता है (initial value)
- repeat — slices tile होते हैं और clip हो सकते हैं
- round — slices tile होते हैं और पूरी संख्या में fit करने के लिए scale होते हैं
- space — slices बराबर gaps के साथ tile होते हैं
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: border-image-repeat: stretch vs round vs repeat
<style>
.box {
border: 20px solid transparent;
border-image-source: url('https://placehold.co/60x60');
border-image-slice: 20;
}
.stretch { border-image-repeat: stretch; }
.round { border-image-repeat: round; }
.repeat { border-image-repeat: repeat; }
</style>
<div class="box stretch">stretch</div>
<div class="box round">round</div>
<div class="box repeat">repeat</div>- बिना border width या style के
border-imageset करना, इसलिए कुछ नहीं दिखता। border-image-sliceमें pixel units इस्तेमाल करना, जबकि यह image pixels के लिए unitless numbers (या percentages) इस्तेमाल करता है।- सही तरीके से slice होने के लिए बहुत छोटी image इस्तेमाल करना।
- Margins और padding किसी element के बाहर और अंदर की space control करते हैं, और margins collapse हो सकते हैं।
- Height और width element size set करते हैं, और box model समझाता है कि ये हिस्से कैसे combine होते हैं।
- Rounded corners और border images box को decorate करते हैं।
हर modern browser में supported: Chrome, Firefox, Safari, Edge और Opera।
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: