CSS border-radius property

By /

CSS সীমানা-ব্যাসার্ধ সম্পত্তি

এই CSS প্রপার্টি বৃত্তাকার সীমানা সেট করে এবং একটি উপাদান, ট্যাগ বা ডিভের চারপাশে গোলাকার কোণগুলি প্রদান করে। এটি একটি উপাদানের কোণগুলির ব্যাসার্ধ সংজ্ঞায়িত করে।

এটি বর্ডার টপ-বাম-ব্যাসার্ধ, বর্ডার-টপ-ডান-ব্যাসার্ধ, বর্ডার-নিচ-ডান-ব্যাসার্ধ এবং বর্ডার-নিচ-বাম-ব্যাসার্ধের জন্য সংক্ষিপ্ত বিবরণ। এটি একটি উপাদানের সীমানার কোণে বৃত্তাকার আকৃতি দেয়। আমরা বর্ডার-ব্যাসার্ধ ব্যবহার করে একটি একক ঘোষণায় বাক্সের চারটি কোণের জন্য সীমানা নির্দিষ্ট করতে পারি। এই সম্পত্তির মানগুলি শতাংশ বা দৈর্ঘ্যের এককে সংজ্ঞায়িত করা যেতে পারে।

এই CSS সম্পত্তিতে নিম্নলিখিত বৈশিষ্ট্যগুলি অন্তর্ভুক্ত রয়েছে যা সারণী করা হয়েছে:

Property Description
border-top-left-radius এটি উপরের-বাম কোণে সীমানা-ব্যাসার্ধ সেট করতে ব্যবহৃত হয়
border-top-right-radius এটি উপরের-ডান কোণে সীমানা-ব্যাসার্ধ সেট করতে ব্যবহৃত হয়
border-bottom-right-radius এটি নীচে-ডান কোণে সীমানা-ব্যাসার্ধ সেট করতে ব্যবহৃত হয়
border-bottom-left-radius এটি নীচে-বাম কোণে সীমানা-ব্যাসার্ধ সেট করতে ব্যবহৃত হয়

 

যদি নীচের-বাম মানটি বাদ দেওয়া হয়, তাহলে এটি উপরের-ডানটির মতোই হবে। যদি নীচের-ডানের মানটি বাদ দেওয়া হয়, তাহলে এটি উপরের-বামের মতোই হবে। একইভাবে, যদি উপরের-ডানটি বাদ দেওয়া হয়, তবে এটি উপরের-বামের মতোই হবে।

আসুন দেখি যখন আমরা এই সম্পত্তিতে একটি একক মান, দুটি মান, তিনটি মান এবং চারটি মান প্রদান করি।

যদি আমরা এই সম্পত্তিতে একটি একক মান (যেমন বর্ডার-ব্যাসার্ধ: 30px;) প্রদান করি, তাহলে এটি সমস্ত কোণে একই মান সেট করবে।

যখন আমরা দুটি মান নির্দিষ্ট করি (যেমন বর্ডার-ব্যাসার্ধ: 20% 10% ;), তখন প্রথম মানটি উপরের-বাম এবং নীচে-ডান কোণগুলির জন্য ব্যবহার করা হবে এবং দ্বিতীয় মানটি উপরের-ডান দিকের জন্য ব্যবহার করা হবে এবং নীচে-বাম কোণে।

যখন আমরা তিনটি মান ব্যবহার করি (যেমন বর্ডার-ব্যাসার্ধ: 10% 30% 20%;) তখন প্রথম মানটি উপরের-বাম কোণে ব্যবহার করা হবে, দ্বিতীয় মানটি উপরে-ডানদিকে এবং নীচে-বাম কোণে প্রয়োগ করা হবে। এবং তৃতীয় মান নীচে-ডান কোণায় প্রয়োগ করা হবে।

একইভাবে, যখন এই সম্পত্তির চারটি মান থাকে (বর্ডার-ব্যাসার্ধ: 10% 30% 20% 40%;) তখন প্রথম মানটি উপরের-বামের ব্যাসার্ধ হবে, দ্বিতীয় মানটি উপরের-ডানদিকে, তৃতীয়টির জন্য ব্যবহার করা হবে মান নীচে-ডানে প্রয়োগ করা হবে, এবং চতুর্থ মানটি নীচে-বাম দিকে ব্যবহার করা হবে।

বাক্য গঠন

  1. border-radius: 1-4 length | %  / 1-4 length | % | inherit | initial;  

সম্পত্তি মান

দৈর্ঘ্য: এটি কোণার আকৃতি নির্ধারণ করে। এটি দৈর্ঘ্যের মান ব্যবহার করে ব্যাসার্ধের আকার নির্দেশ করে। এর ডিফল্ট মান হল 0। এটি নেতিবাচক মান অনুমোদন করে না।

শতাংশ: এটি শতাংশে ব্যাসার্ধের আকার নির্দেশ করে। এটি নেতিবাচক মান অনুমোদন করে না।

উদাহরণ

 
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4. <title> CSS border-radius </title>  
  5. <style>  
  6. div {  
  7. padding: 50px;  
  8. margin: 20px;  
  9. border: 6px ridge red;  
  10. width: 300px;  
  11. float: left;  
  12. height: 150px;  
  13. }  
  14. p{  
  15. font-size: 25px;  
  16. }  
  17. #one {  
  18. border-radius: 90px;  
  19. background: lightgreen;  
  20. }  
  21. #two {  
  22. border-radius: 25% 10%;  
  23. background: orange;  
  24. }  
  25. #three {  
  26. border-radius: 35px 10em 10%;  
  27. background: cyan;  
  28. }  
  29. #four {  
  30. border-radius: 50px 50% 50cm 50em;  
  31. background: lightblue;  }  
  32.   </style>  
  33. </head>  
  34.   <body>  
  35. <div id = “one”>  
  36. <h2> Welcome to the javaTpoint.com </h2>  
  37. <p> border-radius: 90px; </p>  
  38. </div>  
  39. <div id = “two”>  
  40. <h2> Welcome to the javaTpoint.com </h2>  
  41. <p> border-radius: 25% 10%; </p>  
  42. </div>  
  43. <div id = “three”>  
  44. <h2> Welcome to the javaTpoint.com </h2>  
  45. <p> border-radius: 35px 10em 10%; </p>  
  46. </div>  
  47. <div id = “four”>  
  48. <h2>Welcome to the javaTpoint.com</h2>  
  49. <p>border-radius: 50px 50% 50cm 50em;</p>  
  50. </div>  
  51. </body>  
  52. </html>  

আউটপুট

এখন, নির্দিষ্ট কোণগুলির জন্য সীমানা-ব্যাসার্ধ দেখুন।

উদাহরণ- বর্ডার-শীর্ষ-বাম-ব্যাসার্ধ

এটি উপরের-বাম কোণের জন্য সীমানা ব্যাসার্ধ সেট করে।

 
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5. <title> CSS border-radius </title>  
  6. <style>  
  7. #left {  
  8. border-top-left-radius: 250px;  
  9. background: lightgreen;  
  10. padding: 50px;  
  11. border: 6px ridge red;  
  12. width: 300px;  
  13. height: 200px;  
  14. font-size: 25px;  
  15. }  
  16. </style>  
  17. </head>  
  18.   <body>  
  19. <center>  
  20. <div id = “left”>  
  21. <h2>Welcome to the javaTpoint.com</h2>  
  22. <p>border-top-left-radius: 250px;</p>  
  23. </div>  
  24. </center>  
  25. </body>  
  26. </html>  
  27.  

উদাহরণ- বর্ডার-উপর-ডান-ব্যাসার্ধ

এটি উপরের-ডান কোণের জন্য সীমানা-ব্যাসার্ধ সেট করে।

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. #left {  
  6. border-top-right-radius: 50%;  
  7. background: lightgreen;  
  8. padding: 50px;  
  9. border: 6px ridge red;  
  10. width: 300px;  
  11. height: 200px;  
  12. font-size: 25px;  
  13. }  
  14. </style>  
  15. </head>  
  16.   
  17. <body>  
  18. <center>  
  19. <div id = “left”>  
  20. <h2>Welcome to the javaTpoint.com</h2>  
  21. <p>border-top-right-radius: 50%;</p>  
  22. </div>  
  23. </center>  
  24. </body>  
  25. </html>  

উদাহরণ- বর্ডার-নিচ-ডান-ব্যাসার্ধ

এটি নীচে-ডান কোণে সীমানা-ব্যাসার্ধ সেট করে।

 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. #left {  
  6. border-bottom-right-radius: 50%;  
  7. background: lightgreen;  
  8. padding: 50px;  
  9. border: 6px ridge red;  
  10. width: 300px;  
  11. height: 200px;  
  12. font-size: 25px;  
  13. }  
  14. </style>  
  15. </head>  
  16.   
  17. <body>  
  18. <center>  
  19. <div id = “left”>  
  20. <h2>Welcome to the javaTpoint.com</h2>  
  21. <p>border-bottom-right-radius: 50%;</p>  
  22. </div>  
  23. </center>  
  24. </body>  
  25. </html>  

উদাহরণ- বর্ডার-নিচ-বাম-ব্যাসার্ধ

এটি নীচে-বাম কোণের জন্য সীমানা-ব্যাসার্ধ সেট করে।

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. #left {  
  6. border-bottom-left-radius: 50%;  
  7. background: lightgreen;  
  8. padding: 50px;  
  9. border: 6px ridge red;  
  10. width: 300px;  
  11. height: 200px;  
  12. font-size: 25px;  
  13. }  
  14. </style>  
  15. </head>  
  16.   
  17. <body>  
  18. <center>  
  19. <div id = “left”>  
  20. <h2>Welcome to the javaTpoint.com</h2>  
  21. <p>border-bottom-left-radius: 50%;</p>  
  22. </div>  
  23. </center>  
  24. </body>  
  25. </html>  

আউটপুট

আমরা স্ল্যাশ (/) চিহ্ন ব্যবহার করে পৃথক অনুভূমিক এবং উল্লম্ব মান নির্দিষ্ট করতে পারি। স্ল্যাশ (/) এর আগের মানগুলি অনুভূমিক ব্যাসার্ধের জন্য এবং স্ল্যাশ (/) এর পরের মানগুলি উল্লম্ব ব্যাসার্ধের জন্য ব্যবহৃত হয়।

নিচে স্ল্যাশ (/) চিহ্ন ব্যবহার করে একটি উদাহরণ দেওয়া আছে।

উদাহরণ

 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. div{  
  6. padding: 50px;  
  7. border: 6px ridge red;  
  8. width: 300px;  
  9. margin: 20px;  
  10. font-weight: bold;  
  11. height: 175px;  
  12. float: left;  
  13. font-size: 25px;  
  14. }  
  15. #one {  
  16. border-radius: 10% / 50%;  
  17. background: lightgreen;  
  18. }  
  19. #two {  
  20. border-radius: 120px / 100px 10px;  
  21. background: lightblue;  
  22. }  
  23. #three {  
  24. border-radius: 50% 10em / 10% 20em;  
  25. background: lightpink;  
  26. }  
  27. #four {  
  28. border-radius: 100px 10em 120px / 30%;  
  29. background: cyan;  
  30. }  
  31. </style>  
  32. </head>  
  33.   
  34. <body>  
  35. <center>  
  36. <div id = “one”>  
  37. <h2>Welcome to the javaTpoint.com</h2>  
  38. <p>border-radius: 10% / 50%; </p>  
  39. </div>  
  40. <div id = “two”>  
  41. <h2>Welcome to the javaTpoint.com</h2>  
  42. <p>border-radius: 120px / 100px 10px; </p>  
  43. </div>  
  44. <div id = “three”>  
  45. <h2>Welcome to the javaTpoint.com</h2>  
  46. <p>border-radius: 50% 10em / 10% 20em; </p>  
  47. </div>  
  48. <div id = “four”>  
  49. <h2>Welcome to the javaTpoint.com</h2>  
  50. <p>border-radius: 100px 10em 120px / 30%; </p>  
  51. </div>  
  52. </center>  
  53. </body>  
  54. </html>  


Leave a Comment

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

Scroll to Top