شرح border-radius في CSS — كيف تنشئ زوايا دائرية احترافية؟

خاصية border-radius في CSS تتحكم في تدوير زوايا العناصر. تُستخدم كثيراً في البطاقات، الأزرار، والصور الشخصية.

إذا كنت تبحث عن شرح border radius في CSS أو كيف أجعل الصورة دائرية في CSS أو الفرق بين border-radius px و %، فهذا الدرس يشرحها بشكل عملي.

ما هي border-radius في CSS؟

border-radius تحدد مقدار انحناء زوايا العنصر.

• 0: بدون أي انحناء (زوايا حادة).
• 8px: انحناء خفيف مناسب لعناصر كثيرة.
• 50%: تُستخدم غالباً لصناعة شكل دائري.

التعريف البسيط: border-radius in CSS تجعل الحواف ناعمة بدل أن تكون حادة.

كيفية استخدام border-radius في CSS

مثال أول سريع

.card {
    border-radius: 12px;
}

ماذا يفعل هذا الكود؟ يضيف انحناء واضحاً لزوايا البطاقة.

النتيجة المتوقعة: مظهر عصري وأنعم بصرياً.

خطأ شائع: استخدام قيمة كبيرة جداً فتبدو العناصر مبالغاً فيها.

كيف أجعل الصورة دائرية في CSS؟

هذا من أكثر الأسئلة شيوعاً في CSS:

.avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
}

ماذا يفعل هذا الكود؟ يحول الصورة إلى دائرة عندما يكون العرض والارتفاع متساويين.

النتيجة المتوقعة: صورة Profile نظيفة ومتوازنة.

خطأ شائع: اختلاف العرض عن الارتفاع فينتج شكل بيضاوي بدل دائرة.

الفرق بين القيم px و % في border-radius

• px: قيمة ثابتة لا تتغير حسب حجم العنصر.
• %: قيمة نسبية تعتمد على أبعاد العنصر.

.box-px {
    border-radius: 16px;
}

.box-percent {
    border-radius: 50%;
}

ماذا يفعل هذا الكود؟ يوضح الفرق بين انحناء ثابت وانحناء نسبي.

النتيجة المتوقعة: 50% ممتازة للدوائر، وpx أفضل للبطاقات والأزرار.

خطأ شائع: استخدام 50% في عناصر مستطيلة وتوقع شكل دائري كامل.

تخصيص كل زاوية بشكل مختلف

يمكنك إعطاء كل زاوية قيمة مختلفة للحصول على تصميمات مميزة.

.shape {
    border-radius: 30px 6px 30px 6px;
}

ماذا يفعل هذا الكود؟ يجعل شكل العنصر غير متناظر لإبراز بطاقة أو قسم معين.

النتيجة المتوقعة: هوية بصرية أكثر تميزاً.

خطأ شائع: قيم غير متناسقة تجعل التصميم يبدو عشوائياً.

أخطاء شائعة في Border Radius CSS

١) نسيان overflow hidden مع الصور: قد تظهر الصورة خارج الانحناء.

٢) استعمال قيم ضخمة بلا حاجة: يؤدي لشكل غير متوازن.

٣) عدم توحيد نمط الانحناء: يسبب عدم اتساق بصري في الواجهة.

.image-box {
    border-radius: 16px;
    overflow: hidden;
}

الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)

ما هي خاصية border-radius في CSS؟

خاصية تتحكم في تدوير زوايا العناصر مثل البطاقات والأزرار والصور.

كيف أجعل الصورة دائرية في CSS؟

اجعل العرض والارتفاع متساويين ثم استخدم border-radius: 50%;.

ما الفرق بين border-radius بالقيمة px و %؟

px ثابتة، بينما % تتغير حسب أبعاد العنصر.

لماذا لا يتم قص الصورة داخل الزوايا الدائرية؟

غالباً لأن الحاوية تحتاج overflow: hidden.

ما أفضل قيمة border-radius للبطاقات؟

غالباً بين 8px و16px حسب أسلوب التصميم.