مولّد border-radius لـ CSS

عن الأداة

مولّد border-radius هو أداة بصرية تسمح لك بتصميم زوايا منحنية للعناصر في CSS مع معاينة مباشرة. تحكّم منفصل في كل زاوية (أعلى-يسار، أعلى-يمين، أسفل-يمين، أسفل-يسار) باستخدام أشرطة التحرير، مع دعم قيم أفقية ورأسية مختلفة (الشكل البيضاوي) عبر خاصية border-radius: 30px 10px / 15px 5px. الأداة تنتج كود CSS نظيفًا يمكن نسخه مباشرة إلى ملفك، ومناسبة لتصميم البطاقات، والأزرار، وصور الحساب الشخصي الدائرية أو البيضاوية، وحاويات الويب الحديثة ذات الأشكال العضوية. كل شيء يتم في المتصفح، والتغييرات تظهر فورًا في المعاينة الحية.

الأسئلة الشائعة

ما الفرق بين border-radius البسيط والمعقّد؟

border-radius: 20px تطبّق نفس النصف قطر على الزوايا الأربع. أما border-radius: 20px 10px 30px 5px فتحدّد قيمة مختلفة لكل زاوية بالترتيب: أعلى-يسار، أعلى-يمين، أسفل-يمين، أسفل-يسار.

كيف أصنع دائرة كاملة؟

استخدم border-radius: 50% على عنصر مربع (نفس العرض والارتفاع).

ما هي القيم الأفقية/الرأسية المختلفة (شرطة /)؟

الصيغة 20px / 10px تعني نصف قطر أفقي 20px ونصف قطر رأسي 10px، فتنتج زاوية بيضاوية بدلًا من دائرية.

هل يعمل border-radius على الصور؟

نعم. أي عنصر img يقبل border-radius، وتحديدًا 50% لصنع صورة ملف شخصي دائرية.

هل يمكنني استخدام قيم بالنسبة المئوية؟

نعم. النسبة المئوية تُحسب بالنسبة لعرض العنصر (للنصف قطر الأفقي) وارتفاعه (للرأسي).