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

جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 40 من 76.

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

selector {
    border-radius: value;
}

value: القيمة المطلوبة لنصف قطر الزوايا المستديرة، والتي يمكن تحديدها بالبكسل (px)، أو الـ ems (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”. قم بتعيين border إلى 3px solid #4287f5 و border-radius إلى 15px لمنح جميع الزوايا نفس الشكل الدائري.
اكتب قاعدة CSS باستخدام محدد الفئة لاستهداف جميع العناصر التي تحمل الفئة “two”. قم بتعيين border إلى أي قيمة و border-radius إلى أي قيمة من اختيارك.

ورقة مرجعية

تُنشئ خاصية border-radius حوافًا مستديرة للعناصر:

selector {
    border-radius: value;
}

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

قيمة واحدة - تطبق نفس نصف القطر على جميع الزوايا:

div {
    border-radius: 10px;
}

أربع قيم - زوايا فردية (أعلى اليسار، أعلى اليمين، أسفل اليمين، أسفل اليسار):

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

قيمتان - الأولى تنطبق على أعلى اليسار وأسفل اليمين، والثانية على أعلى اليمين وأسفل اليسار:

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

جرّب بنفسك

<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>