CSS: border-radius property

-


في هذه الخاصية يتم التحكم بالزوايا الدائرية rounded corners الخاصة بإطار box element.

تمام خلونا نعمل امثلة عملية حتى نفهم الموضوع بشكل أفضل:
نبدأ بإنشاء ملف HTML باسم  Borderradius وبعدها نضيف الكود التالي: 
<!DOCTYPE html>
<html>
    <style>
        div{
            border: 2px solid gray;
            border-radius: 5px;
        }
    </style>
<body>
   <div> Borders Sides تطبيق </div>            
</body>
</html>

شغل الصفحة ونشوف النتيجة (الصورة)



تمام في هذا المثال طبقنا مثال لتغيير زوايا ال div. 
وللتذكير استخدمنا Internal CSS  في هذا المثال

طيب نفهم الكود:
طبقنا الكود التالي على <div>:

border: 2px solid red; :  في هذا الكود تم تطبيق style على الحدود بحيث العرض 2px والنمط solidواللون red .
 border-radius: 5px;: في هذا الكود تم تطبيق تغيير الزوايا ل div ليتم تدويرها بمقدار 5px