সিএসএস৩ গোলাকার কর্নার - Css3 Rounded Corners



সিএসএস৩ এর border-radius প্রপার্টি ব্যবহার করে কোন কন্টেন্টকে গোলাকার বা বৃত্তাকার কোণ প্রদান করা যায়।


ব্রাউজার সাপোর্ট

টেবিলে দেয়া রোগুলোর প্রথম লাইন ব্রাউজারের সেই প্রথম ভার্সন নির্দেশ করে যেগুলো পুরোপুরি এই প্রপার্টি সাপোর্ট করে। এছাড়াও এর পরের লাইন -webkit- বা -moz- যুক্ত ভার্সন গুলো নির্দেশ করে ব্রাউজারের ঐ প্রথম ভার্সন যেগুলো প্রিফিক্স ব্যবহার করে প্রদর্শিত হতে পারে।

প্রপার্টি
border-radius 5.0
4.0 -webkit-
9.0 4.0
3.0 -moz-
5.0
3.1 -webkit-
10.5


border-radius প্রপার্টি

সিএসএস ৩ এর border-radius প্রোপার্টি ব্যবহার করে আপনি যেকোনো এলিমেন্টের কর্ণার বা কোণকে বৃত্তাকার বা গোলাকার আকৃতি প্রদান করতে পারা যায়। নিচের এর সিনট্যাক্স দেখুন -

সিনট্যাক্স

border-radius:value;



নিচে border-radius প্রপার্টির উদাহরন দেখুন -

উদাহরণ

#example{
border-radius: 25px;
background: #73AD21;
padding: 15px;
width: 300px;
height: 300px;
}


border-radius প্রপার্টি হল আসলে border-top-left-radius, border-top-right-radius, border-bottom-right-radius এবং border-bottom-left-radius প্রপার্টির সর্টহ্যান্ড বা সংক্ষিপ্ত রুপ।


প্রতি কর্ণারের ভিন্ন মান

যদি border-radius প্রোপার্টিতে ১টি ভ্যালু উল্লেখ করা হয় তবে এটি ৪টি কোণের জন্যই প্রযোজ্য হবে।
কিন্তু প্রত্যেক কোণের জন্য ভিন্ন ভিন্ন মান নির্ধারণ করা যায়। সর্বমোট ৪টি উপায়ে border-radius এর শর্টহ্যান্ড প্রপার্টি ব্যবহার করা যায়। নীচে এগুলোর সিনট্যাক্স এবং উদাহরণ দেখুন -

৪টি মানের ব্যবহার

উদাহরণ

#example{
border-radius: 5px 10px 15px 20px;
}


প্রথম মানটি উপরের-বাম কোণ, দ্বিতীয় মানটি উপরের-ডান কোণ, তৃতীয় মানটি নিচের-ডান কোণ এবং চতুর্থ মানটি নিচের-বাম কোণ জন্য প্রযোজ্য হবে।

৩টি মানের ব্যবহার

উদাহরণ

#example{
border-radius: 10px 15px 20px;
}


এই ভাবে কোড লিখলে প্রথম মানটি উপরের-বাম কোণ, দ্বিতীয় মানটি উপরের-ডান এবং নিচের-বাম কোণ, এবং তৃতীয় মানটি নিচের-ডান কোণ নির্দিষ্ট করবে।

২টি মানের ব্যবহার

উদাহরণ

#example{
border-radius: 15px 20px;
}


এই ভাবে কোড লিখলে প্রথম মানটি উপরের-বাম এবং নিচের-ডান কোণ, দ্বিতীয় মানটি উপরের-ডান এবং নিচের-বাম কোণের জন্য প্রযোজ্য হবে।

১টি মানের ব্যবহার

উদাহরণ

#example{
border-radius: 20px;
}


এই ভাবে কোড লিখলে অর্থাৎ মাত্র একটি মান উল্লেখ করলে তা চারটি কোণের জন্যই প্রযোজ্য হবে


বৃত্তাকার কোণের সকল প্রপার্টি

প্রপার্টি বর্ণনা
border-radiusবর্ডারের ৪টি কোণের আকৃতি নির্ধারণ করার জন্য একটি শর্টহ্যান্ড প্রপার্টি।
border-top-left-radiusএই প্রপার্টি বর্ডারের ওপরের দিকের বা পাশের কোণের আকৃতি নির্ধারণ করে।
border-top-right-radiusএই প্রপার্টি বর্ডারের ওপরের দিকের ডান পাশের কোণের আকৃতি নির্ধারণ করে।
border-bottom-right-radiusএই প্রপার্টি বর্ডারের নিচের দিকে ডান পাশের কোণের আকৃতি নির্ধারণ করে।।
border-bottom-left-radiusএই প্রপার্টি বর্ডারের নিচের দিকে বা পাশের কোণের আকৃতি নির্ধারণ করে।






এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.