قبلا در اینجا توضیح دادیم که چگونه میتوان گوشه های عناصر را انحنا داد. اما اخیرا قابلیت جدیدی به CSS۳ اضافه شده است که با استفاده از آن میتوانید انحنای هر گوشه را به طور جداگانه و با امکاناتی جدید تعیین کنید.
از امکانات جدید میتوان به انحنای افقی و عمودی اشاره کرد که با استفاده از آن میتوانید یک بیضی را با استفاده از CSS۳ طراحی کنید. کاری که قبل از این امکان پذیر نبود.در قابلیت جدید CSS۳ برای ایجاد و شخصی سازی میزان انحنای گوشه عناصر کدهای زیر اضافه شده اند:
border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius
که با شخصی سازی کدهای بالا میتوانید به نتیجه دلخواه خود برسید. برای درک بیشتر به مثال های زیر توجه کنید:

البته اگر مقادیری برای میزان انحنا وارد نکنید، هیچگونه انحنایی نخواهید داشت.
نیازی به توضیح اضافی نیست و فقط با توجه به کدهای زیر میتوانید به راحتی از کدها استفاده کنید:

برای ایجاد منحنی های بالا از کدهای زیر استفاده شده است:
#Example_A {
height: ۶۵px;
width:۱۶۰px;
-moz-border-radius-bottomright: ۵۰px;
border-bottom-right-radius: ۵۰px;
} #Example_B {
height: ۶۵px;
width:۱۶۰px;
-moz-border-radius-bottomright: ۵۰px ۲۵px;
border-bottom-right-radius: ۵۰px ۲۵px;
} #Example_C {
height: ۶۵px;
width:۱۶۰px;
-moz-border-radius-bottomright: ۲۵px ۵۰px;
border-bottom-right-radius: ۲۵px ۵۰px;
} #Example_D {
height: ۵em;
width: ۱۲em;
-moz-border-radius: ۱em ۴em ۱em ۴em;
border-radius: ۱em ۴em ۱em ۴em;
} #Example_E {
height: ۶۵px;
width:۱۶۰px;
-moz-border-radius: ۲۵px ۱۰px / ۱۰px ۲۵px;
border-radius: ۲۵px ۱۰px / ۱۰px ۲۵px;
} #Example_F {
height: ۷۰px;
width: ۷۰px;
-moz-border-radius: ۳۵px;
border-radius: ۳۵px;
} البته فعلا فقط مرورگرهای Safari و Google Chrome از نسخه ۵ به بعد و Opera ۱۰ از این قابلیت پشتیبانی میکنند و مرورگر فایرفاکس فقط از دستورهایی که با -moz شروع میشوند پشتیبانی میکند. اگر متوجه شده باشید دستورهای مرورگر فایرفاکس کمی با دستورهای استاندارد متفاوت است پس در هنگام پیاده سازی دقت داشته باشید.
موفق و پیروز باشید.