CSS Rounded Corners

برای ساختن گوشه‌های گرد (Rounded Corners) در CSS از ویژگی border-radius استفاده می‌کنیم. این ویژگی می‌تواند برای همه یا فقط بعضی گوشه‌ها اعمال شود.

📌 گرد کردن همه گوشه‌ها

.box {
border: 2px solid #333;
border-radius: 10px; /* همه گوشه‌ها گرد می‌شوند */
}

📌 گرد کردن یک گوشه خاص

.box {
border: 2px solid #333;
border-top-left-radius: 20px; /* گوشه بالا-چپ */
border-top-right-radius: 0; /* گوشه بالا-راست */
border-bottom-right-radius: 15px; /* گوشه پایین-راست */
border-bottom-left-radius: 5px; /* گوشه پایین-چپ */
}

📌 دایره یا بیضی

• اگر یک مربع داشته باشیم و border-radius: 50% بزنیم → تبدیل به دایره می‌شود.

• اگر مستطیل باشد → تبدیل به بیضی می‌شود.

.circle {
width: 100px;
height: 100px;
background: #0077ff;
border-radius: 50%; /* دایره کامل */
}

📌 مقادیر مختلف (شکل‌های خاص)

border-radius می‌تواند چند مقدار بگیرد:

.box {
border-radius: 10px 30px 50px 70px;
/* ترتیب: بالا-چپ | بالا-راست | پایین-راست | پایین-چپ */
}

📌 ترکیب با تصاویر

می‌توان برای تصاویر هم گوشه‌های گرد درست کرد:

img {
border-radius: 12px;
}