مولّد Border Radius

حول هذه الأداة

يضبط مولد CSS Border Radius قيمة border-radius لكل زاوية من العنصر بالنسبة المئوية بأشرطة تمرير منفصلة أو بشريط All Corners واحد، مع إعدادات جاهزة مثل الدائرة والورقة وblob، وينسخ كود CSS.

طريقة الاستخدام

1. اسحب أشرطة التمرير لكل زاوية، أو استخدم All Corners.
2. جرّب إعدادًا جاهزًا مثل Circle أو Leaf أو Blob.
3. غيّر حجم المعاينة إن لزم الأمر.
4. انقر Copy CSS.

معلومات مفيدة

• تأخذ border-radius حتى أربع قيم بالترتيب: أعلى اليسار، أعلى اليمين، أسفل اليمين، أسفل اليسار.
• ‏border-radius: 50% على عنصر مربع يُنتج دائرة.
• أنصاف الأقطار بالنسبة المئوية تتناسب مع حجم العنصر، بينما تبقى أنصاف الأقطار بالبكسل ثابتة.
• أنصاف الأقطار غير المتساوية على الزوايا المتقابلة تنشئ أشكال الورقة وblob دون أي SVG.
• ‏border-radius مدعومة في كل المتصفحات الحالية دون بادئات.

تعمل بالكامل داخل متصفحك — لا يتم رفع أو حفظ أي شيء تُدخله.

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