X

X

X

CSS3 Rounded Corners । বৃত্তাকার কোন


CSS3 বৃত্তাকার কোন বিশিষ্ট বর্ডার

CSS3 এর border-radius property ব্যবহার করে যেকোনো ইলামেন্টের বৃত্তাকার কোন তৈরি করা যায়।


Browser Support

নিচে উল্লিখিত ব্রাউজারগুলো এই ভার্শন থেকে border-radius প্রপার্টি সাপোর্ট করে। -webkit- ও -moz- যথাক্রামে গুগলক্রোম ও মজিলা ফায়ারফক্স ব্রাউজারের ক্ষেত্রে প্রযোজ্য।

Property
border-radius 5.0
4.0 -webkit-
9.0 4.0
3.0 -moz-
5.0
3.1 -webkit-
10.5

CSS3 border-radius Property

CSS3 ব্যবহার করে যেকোনো ইলামেন্টে বৃত্তাকার কোন বা “rounded corner” প্রয়োগ করা যায়। এক্ষেত্রে border-radius property ব্যবহার করতে হবে।

নিচে তিনটি উদাহরণ উল্লেখ করা হলো:

1. ব্যাকগ্রাউন্ড রং সহ বৃত্তাকার কোন বিশিষ্ট ইলামেন্ট:

Rounded corners!

2. বর্ডার এবং বৃত্তাকার কোন সহ ইলামেন্ট:

Rounded corners!

3. ব্যাকগ্রাউন্ড ইমেজ ও বৃত্তাকার কোন বিশিষ্ট ইলামেন্ট:

Rounded corners!

নিচে উদাহরণটির কোড দেওয়া হলো:

Code Example

#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 property হচ্ছে border-top-left-radius, border-top-right-radius, border-bottom-right-radiusborder-bottom-left-radius property সমূহের সংক্ষিপ্ত ও সমন্বিত shorthand property ।


CSS3 border-radius – সবগুলো কোনের জন্য বৃত্তাকার কোনের মান সেট করার জন্য ব্যবহৃত হয়

যদি border-radius property এর জন্য শুধুমাত্র একটি মান সেট করেন তবে, এই মানটি চারটি কোনের জন্য প্রযোজ্য হবে।

তবে প্রতিটি কোনোর জন্য পৃথকভাবে একসাথে মান সেট করতে পারবেন। নিচে পদ্ধতিটি বর্ণনা করা হলো:

  • চারটি পৃথক মান: প্রথম মানটি top-left, দ্বিতীয় মানটি top-right, তৃতীয় মানটি bottom-right, এবং চতুর্থ মানটি bottom-left corner এর জন্য প্রযোজ্য।
  • তিনটি মান: প্রথম মানটি top-left, দ্বিতীয় মানটি top-right, তৃতীয় মানটি bottom-right এর জন্য প্রযোজ্য।
  • দুটি মান: প্রথম মানটি top-left ও bottom-right corner, এবং দ্বিতীয় মানটি top-right ও bottom-left corner এর জন্য প্রযোজ্য।
  • একটি মান: সবগুলো কর্নারের জন্য সমানভাবে প্রযোজ্য।

নিচে তিনটি উদাহরণের বর্ণনা দেওয়া হলো:
1. চারটি মান – border-radius: 15px 50px 30px 5px:

2. তিনটি মান – border-radius: 15px 50px 30px:

3. দুইটি মান – border-radius: 15px 50px:

নিচে কোডটি উপস্থাপণ করা হলো:

Code Example

#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; 
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

আপনি চাইলে elliptical corner-ও তৈরি করতে পারবেন:

Code Example

#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;
} 

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


নিজে নিজে চেষ্টা করুন!

Exercise 1 »  Exercise 2 »


CSS3 Rounded Corner এর প্রপার্টিসমূহ

Property বর্ণনা
border-radius সব border-*-*-radius property এর মান সেট করার একটি shorthand property ।
border-top-left-radius top-left corner এর বৃত্তাকার কোনের মান সেট করার জন্য ব্যবহৃত হয়।
border-top-right-radius top-right corner এর বৃত্তাকার কোনের মান সেট করার জন্য ব্যবহৃত হয়।
border-bottom-right-radius bottom-right corner এর বৃত্তাকার কোনের মান সেট করার জন্য ব্যবহৃত হয়।
border-bottom-left-radius bottom-left corner এর বৃত্তাকার কোনের মান সেট করার জন্য ব্যবহৃত হয়।