CSS border-image প্রপার্টি একটু জটিল কিন্তু খুব শক্তিশালী। এটি একটি সোর্স ইমেজ ব্যবহার করে এলিমেন্টের চারপাশে বর্ডার তৈরি করে।
Border Image সিনট্যাক্স (শর্টহ্যান্ড)
border-image: url("image.jpg") /* source */
25% / /* slice */
70px / /* width */
2px /* outset */
stretch; /* repeat */
লংহ্যান্ড প্রপার্টিগুলো
- border-image-source: ইমেজ URL বা গ্রেডিয়েন্ট
- border-image-slice: ইমেজকে ৯টি সেকশনে ভাগ করে (৩x৩ গ্রিড)। ডিফল্টে মাঝের অংশ বাদ দেয়। ফিল (fill) কিওয়ার্ড দিয়ে মাঝের অংশ ব্যবহার করা যায়।
- border-image-width: বর্ডার ইমেজের প্রস্থ (%, rem, px)
- border-image-outset: বর্ডার বক্স থেকে কতদূরে বর্ডার ইমেজ থাকবে
- border-image-repeat: এজগুলোর আচরণ (stretch, repeat, round, space)
ব্রাউজার কুইর্কস (Browser Quirks)
- Firefox/Safari: লংহ্যান্ড প্রপার্টিগুলো আলাদা ব্যবহার করা যায়
- Chrome: শুধু শর্টহ্যান্ড কাজ করে, এবং
border-style: solidঅবশ্যই সেট করতে হয়
ক্রস-ব্রাউজার কোড
.border-image-shorthand {
border-style: solid; /* Chrome-এর জন্য আবশ্যক */
border-image: url(https://placekitten.com/900/1000) 25% / 70px / 2px round;
padding: 80px;
}
উপসংহার
border-image একটি শর্টহ্যান্ড প্রপার্টি যা source, slice, width, outset, repeat নিয়ন্ত্রণ করে। সব ব্রাউজারে কাজ করার জন্য border-style: solid সেট করে শর্টহ্যান্ড ব্যবহার করুন।
