تعلم كيفية استخدام خاصية border-radius في CSS لتطبيق حواف دائرية

🎨 تحويل العناصر المربعة إلى تحف فنية باستخدام border-radius في CSS

هل مللت من الشكل المربع التقليدي للعناصر في موقعك؟ مع خاصية border-radius في CSS، يمكنك بسهولة تحويل الزوايا الحادة إلى حواف ناعمة ودائرية تعطي موقعك مظهراً حديثاً وجذاباً. في هذا الدرس، سنتعلم كيفية استخدام هذه الخاصية الرائعة خطوة بخطوة.

📝 ما هي خاصية border-radius؟

خاصية border-radius في CSS تسمح لك بتحديد مدى استدارة زوايا العناصر. يمكنك استخدامها على أي عنصر له حدود (border) أو خلفية. الفكرة بسيطة جداً: كلما زادت القيمة التي تحددها، أصبحت الزوايا أكثر استدارة.

/* مثال أساسي */
.element {
    border-radius: 10px;
}

التعليق: هذه القيمة ستجعل جميع زوايا العنصر مستديرة بنصف قطر 10 بكسل

🔧 الطرق المختلفة لاستخدام border-radius

هناك عدة طرق لكتابة خاصية border-radius، مما يمنحك مرونة كبيرة في التصميم:

1. قيمة واحدة لجميع الزوايا

عندما تستخدم قيمة واحدة، يتم تطبيقها على جميع الزوايا الأربع للعنصر.

.box {
    border-radius: 15px;
}

2. قيمتين للتحكم في الزوايا

القيمة الأولى للزاويتين العلوية اليسرى والسفلية اليمنى، والقيمة الثانية للزاويتين الأخريين.

.box {
    border-radius: 10px 20px;
}

3. أربع قيم للتحكم في كل زاوية بشكل منفصل

تبدأ من الزاوية العلوية اليسرى وتتحرك باتجاه عقارب الساعة.

.box {
    border-radius: 5px 10px 15px 20px;
}

التعليق: 5px للزاوية العلوية اليسرى، 10px للعلوية اليمنى، 15px للسفلية اليمنى، 20px للسفلية اليسرى

🎯 أمثلة عملية واقعية

لنطبق ما تعلمناه على أمثلة حية ستواجهها في مشاريعك:

مثال 1: صنع زر بأطراف ناعمة

.button {
    background-color: #4CAF50;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

التعليق: حواف ناعمة تجعل الزر يبدو أكثر جاذبية للضغط عليه

مثال 2: صورة بدائرية كاملة

.profile-picture {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
}

التعليق: باستخدام 50% نحول الصورة إلى شكل دائري كامل

مثال 3: بطاقة بمظهر حديث

.card {
    background-color: white;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 10px 10px 0 0;
}

التعليق: زوايا مستديرة في الأعلى فقط لمظهر بطاقة أنيق

💡 نصائح مهمة للمبتدئين

1. ابدأ بقيم صغيرة: جرب قيم مثل 5px أو 10px قبل الانتقال إلى قيم أكبر
2. استخدم النسب المئوية للدوائر الكاملة: border-radius: 50% يحول العنصر إلى دائرة
3. تأكد من أبعاد العنصر: العنصر يجب أن يكون مربعاً لتحصل على دائرة مثالية
4. جرب في المتصفح: استخدم أدوات المطورين لتجربة القيم بشكل مباشر