`border-image` প্রোপার্টি ব্যবহার করে এলিমেন্টের বর্ডারের হিসেবে ইমেজ ব্যবহার করা যায়।
উদাহরণ: বর্ডার ইমেজ
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
.border1 { border: 10px solid transparent; padding: 15px; border-image: url("https://i.picsum.photos/id/677/200/300.jpg") 30 round; }
.border2 { border: 10px solid transparent; padding: 15px; border-image: url("https://i.picsum.photos/id/677/200/300.jpg") 2% round; }
</style>
</head>
<body>
<h1>CSS-এ বর্ডার ইমেজ</h1>
<p class="border1">প্যারাগ্রাফের ভিতরে কিছু র্যান্ডম নমুনা টেক্সট</p>
<p class="border2">প্যারাগ্রাফের ভিতরে কিছু র্যান্ডম নমুনা টেক্সট</p>
</body>
</html>
কোড ব্যাখ্যা
- border: 10px solid transparent: বর্ডার প্রস্থ দিয়ে transparent রাখা হয়েছে যাতে ইমেজ見える।
- border-image: url(...) 30 round: স্লাইস ৩০px, repeat mode = round (টাইল করে ফিট করবে)।
- 2% round: স্লাইস ২% (ইমেজের আকারের ২%)।
border-image শর্টহ্যান্ড
`border-image: source slice width outset repeat;` — source=ইমেজ, slice=কাট, width=বর্ডার প্রস্থ, outset=বাহিরে ফেলা, repeat=stretch/repeat/round/space।
