CSS Rounded Corners

ویژگی border-radius برای گرد کردن گوشه‌های عناصر (مثل دکمه‌ها، کارت‌ها، عکس‌ها و …) استفاده میشه.

🔹 ۱. گرد کردن همه‌ی گوشه‌ها


.box {
  width: 150px;
  height: 150px;
  background: coral;
  border-radius: 20px;
}

📌 نتیجه: همه‌ی گوشه‌های مربع به اندازه‌ی 20px گرد میشن.


.box {
  width: 150px;
  height: 150px;
  background: lightblue;
  border-top-left-radius: 30px;
  border-bottom-right-radius: 30px;
}

📌 نتیجه: فقط گوشه‌ی بالا-چپ و پایین-راست گرد میشن.


.circle {
  width: 150px;
  height: 150px;
  background: tomato;
  border-radius: 50%;
}

📌 نتیجه: مربع به دایره تبدیل میشه. (برای تصاویر پروفایل هم خیلی استفاده میشه 👤).


.oval {
  width: 200px;
  height: 100px;
  background: limegreen;
  border-radius: 50%;
}

📌 نتیجه: مستطیل تبدیل به بیضی میشه.


.box {
  width: 200px;
  height: 100px;
  background: gold;
  border-radius: 10px 40px 80px 0px;
}

📌 ترتیب مقادیر:
border-radius: top-left top-right bottom-right bottom-left;