Border Images in CSS ka use normal border ki jagah image ko border ke form me use karne ke liye hota hai. Isse design zyada attractive aur unique ban jata hai.
Yeh property image ko 9 parts me divide karti hai (tic-tac-toe jaise), fir corners aur sides pe apply karti hai.
Border Images in CSS ka main property
border-image ek shorthand property hai jo multiple properties ko combine karti hai:
- border-image-source → image ka path define karta hai
- border-image-slice → image ko kaise cut karna hai
- border-image-width → border ki width
- border-image-outset → border kitna bahar extend kare
- border-image-repeat → image repeat ya stretch kaise hogi
Important: Border image tabhi kaam karega jab normal border property bhi set ho.
Border Images in CSS ka basic example
Yaha:
- image = frame.png
- 25 → slicing value
- round → image repeat hoke fit hoti hai
Stretch vs Round
Difference:
- stretch → image stretch hoti hai
- round → image repeat hoti hai
Different slice values
Slice value change karne se border ka look totally change ho jata hai.
Border Images in CSS use karke tum simple borders ko creative aur visually attractive bana sakte ho, jaha tum image ko slice karke customize kar sakte ho according to design needs.
