CSS Border

By /

CSS বর্ডার

CSS বর্ডার হল একটি শর্টহ্যান্ড প্রপার্টি যা একটি উপাদানের উপর বর্ডার সেট করতে ব্যবহৃত হয়।

CSS বর্ডার বৈশিষ্ট্যগুলি একটি উপাদানের সীমানার শৈলী, রঙ এবং আকার নির্দিষ্ট করতে ব্যবহার করা হয়। CSS বর্ডার বৈশিষ্ট্যগুলি নীচে দেওয়া হল

  • সীমানা শৈলী
  • সীমান্ত রঙ
  • সীমানার প্রশস্থতা
  • সীমানা-ব্যাসার্ধ

1) CSS বর্ডার-স্টাইল

বর্ডার স্টাইল প্রপার্টিটি বর্ডার টাইপ নির্দিষ্ট করতে ব্যবহৃত হয় যা আপনি ওয়েব পেজে প্রদর্শন করতে চান।

কিছু সীমানা শৈলী মান আছে যা একটি সীমানা সংজ্ঞায়িত করতে বর্ডার-স্টাইল সম্পত্তির সাথে ব্যবহার করা হয়।

Value Description
none এটি কোনো সীমানা নির্ধারণ করে না।
dotted এটি একটি বিন্দুযুক্ত সীমানা সংজ্ঞায়িত করতে ব্যবহৃত হয়।
dashed এটি একটি ড্যাশযুক্ত সীমানা নির্ধারণ করতে ব্যবহৃত হয়।
solid এটি একটি কঠিন সীমানা সংজ্ঞায়িত করতে ব্যবহৃত হয়।
double এটি একই সীমানা-প্রস্থ মান সহ দুটি সীমানা সংজ্ঞায়িত করে।
groove এটি একটি 3d খাঁজকাটা সীমানা সংজ্ঞায়িত করে। প্রভাব বর্ডার-রঙ মান অনুযায়ী উত্পন্ন হয়.
ridge এটি একটি 3d রিজড সীমানা সংজ্ঞায়িত করে। প্রভাব বর্ডার-রঙ মান অনুযায়ী উত্পন্ন হয়.
inset এটি একটি 3d ইনসেট সীমানা সংজ্ঞায়িত করে। প্রভাব বর্ডার-রঙ মান অনুযায়ী উত্পন্ন হয়.
outset এটি একটি 3d আউটসেট সীমানা সংজ্ঞায়িত করে। প্রভাব বর্ডার-রঙ মান অনুযায়ী উত্পন্ন হয়.
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. p.none {border-style: none;}  
  6. p.dotted {border-style: dotted;}  
  7. p.dashed {border-style: dashed;}  
  8. p.solid {border-style: solid;}  
  9. p.double {border-style: double;}  
  10. p.groove {border-style: groove;}  
  11. p.ridge {border-style: ridge;}  
  12. p.inset {border-style: inset;}  
  13. p.outset {border-style: outset;}  
  14. p.hidden {border-style: hidden;}  
  15. </style>  
  16. </head>  
  17. <body>  
  18. <p class=“none”>No border.</p>  
  19. <p class=“dotted”>A dotted border.</p>  
  20. <p class=“dashed”>A dashed border.</p>  
  21. <p class=“solid”>A solid border.</p>  
  22. <p class=“double”>A double border.</p>  
  23. <p class=“groove”>A groove border.</p>  
  24. <p class=“ridge”>A ridge border.</p>  
  25. <p class=“inset”>An inset border.</p>  
  26. <p class=“outset”>An outset border.</p>  
  27. <p class=“hidden”>A hidden border.</p>  
  28. </body>  
  29. </html>  

আউটপুট:

No border.

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border.

A ridge border.

An inset border.

An outset border.

A hidden border.

2) CSS সীমানা-প্রস্থ

সীমানা-প্রস্থ বৈশিষ্ট্যটি সীমানার প্রস্থ নির্ধারণ করতে ব্যবহৃত হয়। এটি পিক্সেলে সেট করা আছে। আপনি সীমানার প্রস্থ সেট করতে তিনটি পূর্ব-নির্ধারিত মানগুলির একটি ব্যবহার করতে পারেন, পাতলা, মাঝারি বা পুরু।

দ্রষ্টব্য: সীমানা-প্রস্থ সম্পত্তি একা ব্যবহার করা হয় না। এটি সর্বদা অন্যান্য সীমানা বৈশিষ্ট্যগুলির সাথে ব্যবহার করা হয় যেমন “বর্ডার-স্টাইল” সম্পত্তি প্রথমে সীমানা সেট করতে অন্যথায় এটি কাজ করবে না।

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. p.one {  
  6.     border-style: solid;  
  7.     border-width: 5px;  
  8. }  
  9. p.two {  
  10.     border-style: solid;  
  11.     border-width: medium;  
  12. }  
  13. p.three {  
  14.     border-style: solid;  
  15.     border-width: 1px;  
  16. }  
  17. </style>  
  18. </head>  
  19. <body>  
  20. <p class=“one”>Write your text here.</p>  
  21. <p class=“two”>Write your text here.</p>  
  22. <p class=“three”>Write your text here.</p>  
  23. </body>  
  24. </html>  

3) CSS বর্ডার-রঙ

সীমানার রঙ সেট করার জন্য তিনটি পদ্ধতি রয়েছে।

  • নাম: এটি রঙের নাম নির্দিষ্ট করে। যেমন: “লাল”।
  • RGB: এটি রঙের RGB মান নির্দিষ্ট করে। যেমন: “rgb(255,0,0)”।
  • হেক্স: এটি রঙের হেক্স মান নির্দিষ্ট করে। যেমন: “#ff0000″।

“স্বচ্ছ” নামে একটি বর্ডার রঙও রয়েছে। যদি সীমানা রঙ সেট না করা হয় তবে এটি উপাদানের রঙের বৈশিষ্ট্য থেকে উত্তরাধিকারসূত্রে প্রাপ্ত হয়।

দ্রষ্টব্য: বর্ডার-কালার সম্পত্তি একা ব্যবহার করা হয় না। এটি সর্বদা অন্যান্য সীমানা বৈশিষ্ট্যগুলির সাথে ব্যবহার করা হয় যেমন “বর্ডার-স্টাইল” সম্পত্তি প্রথমে সীমানা সেট করতে অন্যথায় এটি কাজ করবে না।

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. p.one {  
  6.     border-style: solid;  
  7.     border-color: red;  
  8. }  
  9. p.two {  
  10.     border-style: solid;  
  11.     border-color: #98bf21;  
  12. }   
  13. </style>  
  14. </head>  
  15. <body>  
  16. <p class=“one”>This is a solid red border</p>  
  17. <p class=“two”>This is a solid green border</p>  
  18. </body>  
  19. </html>  


Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top