CSS-এ বর্ডারের স্টাইল (border-style) সেট করা

বর্ডারের স্টাইল সেট করতে border-style property ব্যবহার করা হয়। এই property দিয়ে নিচের স্টাইলগুলো নির্বাচন করা যায়:

none: কোনো বর্ডার নেই
solid: একক সলিড লাইন
dotted: ডটের শৃঙ্খলা
dashed: ছোট ছোট লাইনের শৃঙ্খলা
double: দুটি সলিড লাইন
groove: পেজে খোদা হয়ে যাওয়ার মতো দেখায়
ridge: groove-এর বিপরীত (উঠা हुआ)
inset: বক্স পেজে এম্বেডেড (ঘুसा हुआ) দেখায়
outset: বক্স ক্যানভাস থেকে বের হয়ে আসা দেখায়
hidden: none-এর মতো, কিন্তু টেবিল এলিমেন্টে বর্ডার কনফ্লিক্ট রেজোলিউশনে ভিন্ন

উদাহরণ

নিচের কোডটি রান করে বর্ডারের স্টাইল সেট করার পদ্ধতি শিখুন:

<html>
  <head>
  </head>
  <body>
    <p style="border-width:4px; border-style:none;">
      This is a border with none width. </p>
    <p style="border-width:4px; border-style:solid;">
      This is a solid border. </p>
    <p style="border-width:4px; border-style:dashed;">
      This is a dashed border. </p>
    <p style="border-width:4px; border-style:double;">
      This is a double border. </p>
    <p style="border-width:4px; border-style:groove;">
      This is a groove border. </p>
  </body>
</html>

টিপস: border-style: solid dotted dashed double; (top, right, bottom, left) দিয়ে চারপাশে আলাদা স্টাইল দেওয়া যায়।