`border-radius` প্রোপার্টি ব্যবহার করে এলিমেন্টের কোণগুলো বাঁকানো (রাউন্ডেড) করা যায়।
উদাহরণ: রাউন্ডেড কর্নার
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
div { display: inline-block; width: 200px; height: 200px; text-align: center; font-size: 30px; }
.rounded { border-radius: 24px; border: 4px solid green; }
.normal { border: 4px solid green; margin-left: 20px; }
</style>
</head>
<body>
<h1>CSS3 রাউন্ডেড কর্নার উদাহরণ</h1>
<div class="rounded">রাউন্ডেড কর্নার</div>
<div class="normal">ডিফল্ট কর্নার</div>
</body>
</html>
কোড ব্যাখ্যা
- border-radius: 24px: সব চার কোণে ২৪px বাঁকানো।
- border-radius: 10px 20px 30px 40px: উপরের-বাম, উপরের-ডান, নিচের-ডান, নিচের-বাম।
- border-radius: 50%: বৃত্ত/অবাল তৈরি করে।
স jedem কোণ আলাদা
`border-top-left-radius`, `border-top-right-radius`, `border-bottom-right-radius`, `border-bottom-left-radius` — নির্দিষ্ট কোণ টার্গেট করতে।
