شرح خاصية border-radius لإضافة حواف دائرية للحدود

أهلا بكم في كود ويب
أهلا بكم في درس جديد من دروس css وفي هذا الدرس سوف نتعرف على خاصية جديدة من خواص css وهي خاصية border-radius
من خلال استخدام هذه الخاصية يمكننا إضافة حواف دائرية للحدود كما نريد بحيث يظهر التنسيق بشكل جميل.
تعلمنا في الدرس السابق كيفية إظهار حدود للطبقات من خلال خاصية border وأيضاً تعلمنا كيفية تغيير لون الحدود باستخدام خاصية border-color

الخصائص والقيم يمكنك تغيير قيمة البيكسل كما تناسبك
border-radius:5px; تطبيق الحواف على جميع الاتجاهات بمقدار 5 بيكسل
border-radius:5px 10px 20px 30px; تطبيق الحواف بمقدار 5 بيكسل من أعلى اليسار و 10 بيكسل من أعلى اليمين و 20 بيكسل من أسفل اليسار و 30 بيكسل من أسفل اليمين
border-top-right-radius:5px; تطبيق الحواف بمقدار 5 بيكسل من أعلى اليمين فقط
border-top-left-radius:5px; تطبيق الحواف بمقدار 5 بيكسل من أعلى اليسار فقط
border-bottom-right-radius:5px; تطبيق الحواف بمقدار 5 بيكسل من أسفل اليمين فقط
border-bottom-left-radius:5px; تطبيق الحواف بمقدار 5 بيكسل من أسفل اليسار فقط

border-radius:5px;

border-radius:5px 10px 20px 30px;

border-top-right-radius:5px;

border-top-left-radius:5px;

border-bottom-right-radius:5px;

border-bottom-left-radius:5px;