CSS গোলাকার

CSS গোলাকার

CSS-এর মাধ্যমে border-radius প্রতিভা, যার মাধ্যমে কোনও উপাদানের 'রুম্বো' শৈলীকে কার্যকর করা যায়。

CSS border-radius এট্রিবিউট

CSS border-radius প্রতিভা এলিমেন্টকে কোণের ব্যাস নির্দিষ্ট করে।

সুঝানা:আপনি এই প্রতিভা এলিমেন্টকে বক্ষাঙ্কী করতে পারেন!

এখানে তিনটা উদাহরণ আছে:

1. নির্দিষ্ট পটভূমির রঙ সহ বক্ষাঙ্কী বৈশিষ্ট্যগুলোর এলিমেন্ট:

বক্ষাঙ্কী!

2. কিনারা সহ বক্ষাঙ্কী বৈশিষ্ট্যগুলোর এলিমেন্ট:

বক্ষাঙ্কী!

3. পটভূমি ছবি সহ বক্ষাঙ্কী বৈশিষ্ট্যগুলোর এলিমেন্ট:

বক্ষাঙ্কী!

এটা কোডটা:

উদাহরণ

#rcorners1 {
  border-radius: 25px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 25px;
  background: url(paper.gif);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

আপনার নিজের হাতে পরীক্ষা করুন

সুঝানা:border-radius প্রতিভা এক্সট্রাকট এটা হল:

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

CSS border-radius - প্রতিটি কোণ নির্দিষ্ট করুন

border-radius প্রতিভা একটা থেকে চারটা মান গ্রহণ করতে পারে। নিয়ম এইভাবে:

চারটা মান - border-radius: 15px 50px 30px 5px;(সবগুলো ক্রমবর্ধমানে ব্যবহার করা হয়: ডান ওপরের কোণ, ডান ওপরের কোণ, ডান নিচের কোণ, ডান নিচের কোণ):

তিনটা মান - border-radius: 15px 50px 30px;(প্রথম মানটা ডান ওপরের কোণের জন্য ব্যবহার করা হয়, দ্বিতীয়টা ডান ওপরের ও ডান নিচের কোণের জন্য ব্যবহার করা হয়, তৃতীয়টা ডান নিচের কোণের জন্য ব্যবহার করা হয়):

দুটা মান - border-radius: 15px 50px;(প্রথম মানটা ডান ওপরের কোণ এবং ডান নিচের কোণের জন্য ব্যবহার করা হয়, দ্বিতীয়টা ডান ওপরের ও ডান নিচের কোণের জন্য ব্যবহার করা হয়):

একটা মান - border-radius: 15px;(এই মানটা চারটি কোণকেও ব্যবহার করা হয়, সবগুলো বক্ষাঙ্কী একইভাবে হয়):

এটা কোডটা:

উদাহরণ

#rcorners1 {
  border-radius: 15px 50px 30px 5px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 15px 50px 30px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 15px 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners4 {
  border-radius: 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

আপনার নিজের হাতে পরীক্ষা করুন

আপনি একটা অবকাঠামো বক্ষাঙ্কী তৈরী করতেও পারেন:

উদাহরণ

#rcorners1 {
  border-radius: 50px / 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 15px / 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 50%;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px;
}

আপনার নিজের হাতে পরীক্ষা করুন

CSS বক্ষাঙ্কী প্রতিভা

প্রতিভা বর্ণনা
border-radius চারটি border-*-*-radius এটা সকল বর্তমান রেখা গুলোর সংক্ষিপ্ত প্রতীক।
border-top-left-radius ডান উপরের হোল্ডারের আকৃতি নির্ধারণ করে
border-top-right-radius ডান উপরের হোল্ডারের আকৃতি নির্ধারণ করে
border-bottom-right-radius ডান নিচের হোল্ডারের আকৃতি নির্ধারণ করে
border-bottom-left-radius ডান নিচের হোল্ডারের আকৃতি নির্ধারণ করে