گوشه‌های گرد

آشنایی کامل با border-radius: دایره، بیضی، گوشه‌های نامتقارن و افکت‌های پیشرفته

گوشه‌های گرد در CSS

border-radius یکی از پرکاربردترین ویژگی‌های مدرن CSS است که گوشه‌های عناصر را گرد می‌کند.

مقادیر پایه

/* گوشه‌های یکنواخت */
    .box { border-radius: 10px; }
    
    /* هر گوشه جداگانه */
    .box { border-radius: 10px 20px 30px 40px; }
    /* بالا-چپ  بالا-راست  پایین-راست  پایین-چپ */
    
    /* عمودی | افقی */
    .box { border-radius: 10px 30px; }

اشکال خاص

/* دایره کامل */
    .circle {
        width: 100px; height: 100px;
        border-radius: 50%;
    }
    
    /* قرصی */
    .pill {
        border-radius: 50px;
    }
    
    /* بیضی */
    .ellipse {
        border-radius: 50% / 25%;
    }

گوشه‌های جداگانه

.box {
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

اشکال خلاقانه

/* قطر */
    .blob {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    
    /* لوب‌قلب */
    .leaf {
        border-radius: 5px 5px 5px 50px;
    }

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط