HR এলিমেন্ট এবং বর্ডার স্টাইল ব্যবহার করে বিভিন্ন ধরনের ডিভাইডার (দাগা, বিন্দু, সলিড, রাউন্ডেড, ডাবল) তৈরি করা যায়।
উদাহরণ: বিভিন্ন ডিভাইডার
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
.dashed { border-top: 3px dashed rgb(216, 22, 22); }
.dotted { border-top: 3px dotted rgb(8, 11, 167); }
.solid { border-top: 3px solid rgb(18, 167, 38); }
.rounded { border-top: 8px solid rgb(200, 255, 0); border-radius: 5px; }
.double { border-top: 3px double rgb(219, 46, 196); }
</style>
</head>
<body>
<h1>ডিভাইডার উদাহরণ</h1>
<p>দাগা (Dashed)</p> <hr class="dashed" />
<p>বিন্দু (Dotted)</p> <hr class="dotted" />
<p>সলিড (Solid)</p> <hr class="solid" />
<p>রাউন্ডেড (Rounded)</p> <hr class="rounded" />
<p>ডাবল (Double)</p> <hr class="double" />
</body>
</html>
কোড ব্যাখ্যা
- border-top: HR-এ শুধু টপ বর্ডার সেট করলেই ডিভাইডার তৈরি হয়।
- dashed / dotted / solid / double: বর্ডার স্টাইল।
- .rounded { border-radius: 5px; }: বর্ডারের কোণ বাঁকানো।
অন্য ডিভাইডার আইডিয়া
গ্রেডিয়েন্ট বর্ডার (`border-image: linear-gradient(...)`), SVG শেপ, বা `::before/::after` দিয়ে কাস্টম ডিভাইডার তৈরি করা যায়।
