مولد زوايا CSS border-radius
اضبط كل زاوية بالبكسل أو النسبة أو rem لتحصل على سطر مختصر والخصائص المنفصلة لكل زاوية.
جارٍ تحميل الأداة…
المعالجة والخصوصية: تُحسب النتيجة داخل متصفحك ولا تُرسل بياناتك إلى أي خادم.
طريقة الاستخدام
- أدخل أعلى اليسار، أعلى اليمين، أسفل اليمين، أسفل اليسار والوحدة.
- تظهر النتيجة فورًا وتتحدّث مع كل تعديل.
- انسخ النتيجة، أو انسخ رابطًا يحفظ القيم نفسها لمشاركتها.
طريقة الحساب
الترتيب: أعلى اليسار، أعلى اليمين، أسفل اليمين، أسفل اليسار. قيمة واحدة إذا تساوت الأربع، وقيمتان إذا تساوت المتقابلتان، وثلاث قيم إذا تساوت أعلى اليمين وأسفل اليسار، وإلا أربع قيم.
مثال
المدخلات: أعلى اليسار = 12، أعلى اليمين = 12، أسفل اليمين = 12، أسفل اليسار = 12، الوحدة = px. النتيجة: كود CSS مختصر: border-radius: 12px;.
الحدود والملاحظات
- يولّد زوايا دائرية فقط، ولا يدعم الزوايا البيضاوية بصيغة 10px / 20px.
- الترتيب ثابت في CSS حتى في الصفحات العربية، فأعلى اليسار يبقى أعلى اليسار. استخدم border-start-start-radius إذا أردت زوايا تتبع الاتجاه.
أسئلة شائعة عن هذه الأداة
كيف أصنع دائرة كاملة؟
اجعل العرض والارتفاع متساويين واستخدم border-radius: 50%.
كيف أصنع زرا بشكل كبسولة؟
استخدم قيمة كبيرة مثل 9999px، فيأخذ كل طرف نصف ارتفاع الزر تلقائيا.
لماذا تظهر قيمتان فقط أحيانا؟
لأن الزوايا المتقابلة متساوية، فالصيغة المختصرة 10px 0 تعني أعلى اليسار وأسفل اليمين 10px والباقيتين 0.