مولّد Border Radius
صمّم border-radius في CSS بصرياً: أربعة أشرطة تمرير مستقلة للزوايا بالبكسل أو بالنسبة المئوية، مع اختصار لربط جميع الزوايا للحصول فوراً على دوائر وأزرار بيضاوية، بالإضافة إلى وضع الكتل العضوية بأشكال عشوائية.
🔒 تتم معالجتها بالكامل في متصفحك — ولا يتم تحميل أي شيء تدخله هنا على الإطلاق.
النتيجة
يمكن لإعلان border-radius أن يستقبل حتى أربع قيم زوايا مستقلة بالإضافة إلى صيغة اختيارية ذات ثماني قيم مع فاصلة مائلة للمنحنيات العضوية — أجزاء متحرّكة أكثر ممّا يدركه معظم الناس حتى يحتاجوا شيئاً يتجاوز بطاقة مستديرة بسيطة. يضع هذا المولّد كلّ جزء من هذه الأجزاء على الشاشة: أربعة أشرطة تمرير للزوايا مع وحدتها الخاصة بالبكسل أو النسبة المئوية، واختصار لربط جميع الزوايا للأشكال المتماثلة، ووضع الكتل العضوية لأشكال لا يمكن لقيمة نصف قطر واحدة أن تعبّر عنها.
يغطّي وضع الزوايا الأشكال التي يحتاجها الناس فعلاً: اربط كل زاوية بشريط تمرير واحد للحصول على دوائر تامّة وأزرار بيضاوية وأشكال مربّعة مستديرة، أو افصل الربط لتدوير أعلى لوحة منسدلة فقط أو جهة واحدة فقط من بطاقة. معاينة برقعة الشطرنج خلف الشكل، القابلة للتبديل بين خلفية فاتحة وداكنة، تجعل من الواضح تماماً أيّ الزوايا تُقصّ عند أي نصف قطر — نفس الحيلة البصرية التي تستخدمها أدوات الملفات في هذا الموقع لإظهار الشفافية.
وضع الكتل العضوية هو النصف الآخر: صيغة CSS ذات القيم الثمانية مع الفاصلة المائلة تسمح لأنصاف الأقطار الأفقية والرأسية لكل زاوية بأن تختلف، وهذا ما يحوّل المستطيل المستدير إلى مخطط خارجي عضوي غير منتظم. اضغط «توليد عشوائي» للحصول على شكل جديد في أي وقت وانسخ كود CSS المسؤول عنه بالضبط — دون الحاجة إلى تصدير SVG أو مكتبة خارجية. تغطّي الصفحات المعدّة مسبقاً الطلبات التي يكتبها الناس فعلاً في مربّع البحث: دائرة تامّة، وزر بيضاوي بشكل ملعب، ومربّع مستدير بنمط iOS، وكتلة عضوية جاهزة.
مثل كل أداة في هذا الموقع، تعمل بالكامل داخل متصفّحك: لا رفع للملفات، ولا حساب، ويستمر المولّد في العمل دون اتصال بالإنترنت بعد تحميل الصفحة.