مولّد CSS Border Radius
صمّم خاصية border-radius في CSS بصريًا مع معاينة حية وانسخ كودًا جاهزًا للإنتاج.
border-radius: —;
خصوصية كاملة 100% — كل شيء يعمل في متصفحك. لا يُرفع أي شيء.
حول مولّد CSS Border Radius
مولّد نصف قطر حواف CSS يصنع كل شيء من البطاقات المدوَّرة بلطف إلى أشكال بلوب عضوية. اسحب مقابض الزوايا مباشرة على المعاينة، أو اضبط كل زاوية رقمياً — بما في ذلك صيغة القيم الثمانية الكاملة، حيث تملك كل زاوية أنصاف أقطار أفقية وعمودية منفصلة. هذا المحور الثاني هو ما يفتح البيضات والأوراق وقطرات الدمع والبلوبات.
مفتاح ربط الزوايا يبقي الزوايا الأربع متزامنة للتدوير الموحد الكلاسيكي، بينما إلغاء الربط يحرر كل زاوية لأشكال غير متماثلة. اثنا عشر إعداداً مسبقاً — rounded وpill وcircle وsquircle وبلوبان وleaf وegg وarch وteardrop وpetal وwave — تُظهر ما تستطيع الخاصية فعله، وزر عشوائي يولّد أشكالاً عضوية جديدة بلا نهاية.
يمكنك تغيير الوحدة، وإعادة تلوين العنصر والقماش لمطابقة تصميمك، ونسخ إما قيمة border-radius المجرَّدة أو قاعدة CSS كاملة. الأداة تعمل 100% من جانب العميل — لا شيء يُرفع.
كيفية استخدام مولّد CSS Border Radius
- اسحب مقابض الزوايا على المعاينة، أو أوقف "ربط كل الزوايا" لتحرير كل زاوية بشكل منفصل.
- اضبط نصف القطر الأفقي والعمودي لكل زاوية للحصول على أشكال عضوية شبيهة بالبلوب.
- اختر وحدتك واضبط ألوان العنصر والخلفية للمعاينة في السياق.
- جرّب الإعدادات المسبقة — pill وsquircle وblob وleaf وteardrop والمزيد — أو اضغط عشوائي.
- انسخ قيمة border-radius أو CSS الكامل.