حواف العناصر (Border Radius)

جزء من قسم التنسيق باستخدام CSS في رحلة HTML على Coddy. الدرس 40 من 76.

في CSS، تُستخدم الخاصية border-radius لإنشاء زوايا مستديرة للعنصر. تتيح لك هذه الخاصية تحديد نصف قطر الانحناء لكل زاوية، مما يمنحك التحكم في شكل حدود العنصر. إليك الصيغة الأساسية لاستخدام الخاصية border-radius:

selector {
    border-radius: value;
}

value: نصف القطر المطلوب للزوايا المستديرة، ويمكن تحديده بالبكسل (px) أو بوحدات em (em) أو بالنسب المئوية (%) أو بوحدات CSS صالحة أخرى.

يمكنك تحديد قيمة واحدة لتطبيق نصف القطر نفسه على الزوايا الأربع. في المثال التالي، ستكون جميع عناصر <div> ذات زوايا مستديرة بنصف قطر 10px.

div {
    border-radius: 10px;
}

يمكنك تعيين قيم مختلفة لكل زاوية على حدة، باستخدام الترتيب التالي: أعلى اليسار، أعلى اليمين، أسفل اليمين، أسفل اليسار.

.button {
    border-radius: 10px 20px 30px 40px;
}

يمكنك أيضًا تحديد قيمتين فقط؛ ستُطبَّق القيمة الأولى على الزاويتين العلوية اليسرى والسفلية اليمنى، وستُطبَّق القيمة الثانية على الزاويتين العلوية اليمنى والسفلية اليسرى.

img {
    border-radius: 20px 50px;
}

التحدي

سهل

لديك مستند HTML يحتوي على عنصري <div>، لكل منهما إحدى الفئتين "one" و"two". اتبع الخطوات أدناه:

اكتب قاعدة CSS باستخدام محدد فئة لاستهداف جميع العناصر ذات الفئة “one”. اضبط الحد على 3px solid #4287f5 ونصف قطر الحد على 15px لجعل جميع الزوايا مستديرة بالشكل نفسه.
اكتب قاعدة CSS باستخدام محدد فئة لاستهداف جميع العناصر ذات الفئة “two”. اضبط الحد على أي قيمة ونصف قطر الحد على أي قيمة من اختيارك.

جرّب بنفسك

<html>
<head>
    <title>Border Radius</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="one">This is a division with rounded corners.</div>
    <div class="two">This is another division with rounded corners.</div>
</body>
</html>