تعلم استعمال خاصية border-radius في CSS بإحترافية

السلام عليكم ورحمة الله تعالى وبركاته 

في هذا الشرح سوف نشرح خاصية border-radius في CSS وهي خاصية بسيطة جدا تساعد على وضع حواف مستديرة لعنصر محدد مثل div وبطبيعة الحال لا بد من وضع background-color و width و height ل div لكي تظهر لك النتيجة واولا سنبدأ بإعطاء مثال حول هذه الخاصية وسنبدأ بكتابة الكود html  و كود Css واسفلهم ستجد النتيجة وبتأكيد سنقوم بوضع امثلة مختلفة وبعضها سيكون مدهش بالنسبة لك انا متأكد لأن هذه الخاصية رغم سهولة استعمالها لكنك تستطيع القيام بأشياء عظيمة من خلالها لذلك المرجو قراءة المقال لآخره ومتابعة كل الأمثلة التي سوف اقدمها لك .

المثال الأول

<div></div>

div {
background-color: red;
width:100px;
height:100px;
border-radius:10px;
}

المثال الثاني

في المثال الثاني سنقوم بإنشاء زر التحميل، يمكنك وضع اي رابط تحميل بدل (#) المهم سوف نلحق خاصية border-radius بيها لترى بنفسك الشكل النهائي كما اتمنى منك ان تقوم بمشاهدة باقي الأمثلة لأن هذه الخاصية كما قلت سابقا بسيطة لكن يمكن ان تنشئ بيها اشياء مدهشة .

<a id="ILY" href="#">Example(2)</a>

#ILY{
    padding: 5px;
    background-color: red;
    color: black;
    border-radius: 10px;
}

Example(2)

المثال الثالث

في المثال الثالث سوف نطبق خاصية border-radius على صورة بحيث سنحاول جعل مظهر الصورة دائري 

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTqPmloEEJAnKAgnO81qAmNpDDtlkLZ1y3_tyL-RtrHvcWOSfcz9aZf_1EGaeCNNBh9pVn1z0BORG8EUL3RvIp11HdSYcG48ljg65zXxGlwuU6-SODVA3AktYJTflABnP68X0Cu3GRZbU/s1626/bfn1606245541.353165Awp7HlP_FZeDZSBQILxsZ85WnHe4Cq4hsL5d_processed.jpg" alt="صورة"/>

img{
border-radius:50%;
}

الصورة العادية

الصورة بخاصية border-radius

الأمر لا يقتصر على الصورة فقط يمكنك كذلك وضع شكل دائري لي اي عنصر HTML مثلا div ,غيرها من العناصر .

المثال الرابع

سنقوم في هذا المثال بتعمق في خاصية borde-radius ونتعلم كيف نتمكن من التحكم في الحواف كل واحدة على حدى مثلا اذا كنت تريد ان تضع حواف فوق على اليسار وتحت على اليمين ، واما الزويتان البقيتان فنتركهم في شكلهم العادي وهذا ما سنفعله في هذا المثال المهم شاهد المثال وانا متأكد انك ستفهم .

<div id="EXO"></div>

#EXO{
    display: inline-block;
    width: 100px;
    height: 60px;
    background-color: red;
    border-radius: 10px 0 10px 0;
}

صورة توضيحية