الأدوات · CSS · مولّد استدارة الزوايا
مولّد استدارة الزوايا
شكّل كل زاوية من زوايا الصندوق على حدة، أو ادمجها في شكل عضوي غير منتظم، وانسخ كود border-radius.
أضف ملفًا وشغّل الأداة.
ملفك جاهز.
جرّب ملفًا آخر، أو أعد المحاولة.
الإعدادات
اضبط الإعدادات أدناه. تتحدّث النتيجة أثناء العمل.
تعمل الأداة بالكامل داخل متصفحك. لا يُرفع أي ملف.
تعمل الأداة بالكامل داخل متصفحك. لا يُرفع أي شيء إلى أي خادم، ولا يغادر جهازك.
كيف تعمل
اضبط الاستدارة المرتبطة، أو أوقف تفعيل "ربط جميع الزوايا" لضبط كل زاوية على حدة.
انتقل إلى وضع الشكل العضوي، اضبط النعومة، ثم اضغط "عشوائي" للحصول على شكل عضوي.
انسخ كود border-radius النهائي.
أسئلة شائعة
نعم. أوقف تفعيل "ربط جميع الزوايا" واضبط كل زاوية من الأربع بشكل مستقل.
يولّد تقنية اختصار border-radius المستخدمة للأشكال العضوية غير المنتظمة: استدارة أفقية ورأسية مختلفة لكل زاوية. اضبط مدى وضوح التأثير عبر "النعومة"، ثم اضغط "عشوائي" للحصول على شكل جديد.
نعم. اضبط الاستدارة على 50% للحصول على دائرة من صندوق مربع، أو شكل حبة من مستطيل عريض.
لا. كل شيء يعمل داخل متصفحك.
أدلة
نظرة أقرب على مشكلات محددة تحلّها هذه الأداة.
Why Every Rounded Corner Looks the Same (and How Blob Shapes Fix It)
The same 8px or 12px radius on every card, button and image is efficient and instantly forgettable. border-radius can do far more than round a rectangle's corners evenly.
اقرأ الدليلHow to Round Corners and Build CSS Blob Shapes
Simple mode for a clean rectangle, circle or pill. Blob mode for an organic, asymmetric shape. The exact controls for both, and what the generated CSS actually contains.
اقرأ الدليلCircle, Pill or Blob: Picking the Right border-radius
An avatar circle, a pill button and an organic background shape all use border-radius, with three different settings: 50% on a square, a px radius of half the height, eight percentages.
اقرأ الدليل
التعليقات