مولّد زوايا الحدود CSS

اضبط الزوايا الأربع لعنصر بشكل مستقل واحصل فورًا على قيمة CSS border-radius المقابلة، مع معاينة مباشرة.

مثال:

كيف يعمل؟

يمكن لخاصية CSS border-radius استقبال حتى أربع قيم، قيمة لكل زاوية، بالترتيب: أعلى-يسار، أعلى-يمين، أسفل-يمين، أسفل-يسار. تتيح لك هذه الأداة ضبط كل زاوية بشكل مستقل ومعاينة النتيجة قبل نسخ الكود.

كيف أنشئ شكلًا دائريًا أو بيضاويًا مثاليًا؟

اضبط الزوايا الأربع بوحدة "%" على قيمة 50%: عند تطبيقها على عنصر مربع، ينتج دائرة مثالية؛ وعند تطبيقها على مستطيل، ينتج قطع ناقص (ellipse).

لماذا نستخدم قيمًا مختلفة حسب الزوايا؟

الزوايا غير المتماثلة تتيح إنشاء أشكال عضوية أو تأثيرات "قطرة الماء"، وغالبًا ما تُستخدم فقاعات إشعارات أو عناصر زخرفية.

معالجة محلية 100%: يتم الحساب بالكامل في متصفحك عبر WebAssembly، دون إرسال أي بيانات إلى خادم.