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 ডান নিচের হোল্ডারের আকৃতি নির্ধারণ করে