مولد زوايا CSS — مجاني على الإنترنت
انشئ زوايا CSS بصريا وتحكم في الزوايا الاربع بشكل مستقل.
Who uses the مولد زوايا CSS?
- مطورو الواجهة الأمامية الذين ينشئون قيم border-radius لمكونات أنظمة التصميم.
- مصممو واجهات المستخدم الذين يختبرون خيارات التدوير للوصول إلى الوزن البصري المناسب.
- المبتدئون في CSS الذين يستكشفون خاصية border-radius من خلال التصور التفاعلي.
How the مولد زوايا CSS works
استخدم أشرطة التمرير لضبط نصف قطر كل زاوية من الزوايا الأربع بشكل مستقل.
فعّل "Link all corners" لتحريك جميع أشرطة التمرير الأربعة معًا للحصول على تدوير موحّد.
شاهد الشكل يتحدث فوريًا على عنصر بطاقة نموذجية.
انسخ قيمة CSS الخاصة بـ border-radius واستخدمها مباشرة في ورقة الأنماط لديك.
Tips & tricks
- ألغِ تفعيل "Link all corners" لصنع زوايا غير متماثلة — مفيدة لفقاعات المحادثة أو الأشكال بنمط التبويبات.
- يستخدم CSS الناتج قيمة نصف قطر واحدة فقط لكل زاوية (border-radius: TL TR BR BL) — للزوايا البيضاوية، عدّل يدويًا القيمة المنسوخة باستخدام صيغة الشرطة المائلة.
- ترتيب الزوايا في اختصار CSS يبدأ دائمًا من أعلى اليسار ويستمر باتجاه عقارب الساعة — وهو نفس ترتيب تسميات أشرطة التمرير في هذه الأداة.
- قيم نصف القطر الكبيرة جدًا على العناصر الصغيرة تصل إلى حد بصري بمجرد التقاء الزوايا في المنتصف.
Frequently Asked Questions
ما هي الصيغة المختصرة لخاصية border-radius في CSS؟
قيمة واحدة: border-radius: 8px (جميع الزوايا متساوية). أربع قيم: border-radius: 10px 20px 30px 40px (أعلى يسار، أعلى يمين، أسفل يمين، أسفل يسار، باتجاه عقارب الساعة). قيمتان: border-radius: 10px 20px (أعلى يسار+أسفل يمين، أعلى يمين+أسفل يسار).
كيف أصنع دائرة مثالية باستخدام CSS؟
اضبط border-radius: 50% على عنصر مربع (العرض والارتفاع متساويان). في عنصر غير مربع، ستنتج 50% شكلًا بيضاويًا. للحصول على دائرة، استخدم border-radius: 50% على عنصر div بعرض وارتفاع متساويين.
ما هي الزوايا البيضاوية؟
تدعم خاصية border-radius في CSS نصف قطر أفقي وعمودي منفصلين لكل زاوية باستخدام صيغة 8 قيم: border-radius: 10px 40px / 40px 10px تُنتج أشكال "بلوب" عضوية. هذه الأداة لا تُنتج هذه الصيغة — فهي تتحكم في قيمة نصف قطر واحدة فقط لكل زاوية.
هل يمكنني صنع أشكال "بلوب" عضوية باستخدام border-radius؟
نعم، عبر كتابة صيغة الـ 8 قيم الكاملة لـ CSS يدويًا (نصف قطر أفقي وعمودي مختلفين لكل زاوية). تغطي هذه الأداة الحالة الأكثر شيوعًا وهي نصف قطر واحد لكل زاوية؛ للزوايا البيضاوية/شكل البلوب، عدّل القيمة المنسوخة يدويًا.
ما القيم التي تُنتج تدويرًا نموذجيًا لـ "البطاقة"؟
4–8px هي المعيار للبطاقات الأنيقة الخفيفة. 12–16px شائعة في بطاقات واجهة المستخدم الحديثة. 24px أو أكثر تُستخدم لعناصر بنمط "الحبة" أو "العلامة". القيم القريبة من 50 على البطاقات الصغيرة تبدأ تبدو مبالغًا فيها.
Is my data safe when using the مولد زوايا CSS?
Completely safe. The مولد زوايا CSS processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the مولد زوايا CSS output in commercial projects?
Yes. The مولد زوايا CSS is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the مولد زوايا CSS follow official standards?
Yes. The مولد زوايا CSS is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.