border-radius: 16px 16px 16px 16px;
width: 200px;
height: 200px;

منشئ الحواف المجاني عبر الإنترنت — محرر CSS البصري

أنشئ قيم CSS لحافة الحدود بشكل بصري. اصمم زوايا منحنية، أزرار على شكل حبات، أشكال عضوية، وأشكال مبدعة مع معاينة حية ونتائج CSS فورية.

ما هو منشئ حافة الحدود؟

منشئ حافة الحدود هو أداة بصرية تساعد المصممين على إنشاء قيم CSS border-radius دون الحاجة إلى حساب القيم بالبكسل أو النسب المئوية يدويًا. بدلًا من كتابة الأرقام وتحديث المتصفح، تقوم بتعديل الم滑动条 وترى الشكل يتغير في الوقت الفعلي.

تُستخدم خاصية CSS border-radius لتقوس زوايا العنصر. إنها واحدة من أكثر خصائص CSS مرونة — قادرة على إنشاء كل شيء من الزوايا المنحنية البسيطة إلى الأشكال العضوية المعقدة.

كيفية استخدام هذا منشئ حافة الحدود

1. اختر نموذجًا مسبقًا — ابدأ مع الزوايا المنحنية، الأزرار على شكل حبات، الأشكال العضوية، الأوراق، السقوط، أو الأشكال المُشكلة.
2. تعديل الم滑动条 — تحكم في كل زاوية بشكل مستقل أو ربطها معًا.
3. حدد الأبعاد — تغيير العرض والارتفاع لتناسب عنصرك.
4. تخصيص الألوان — ضع لون المربع وخلفية المعاينة.
5. نسخ CSS — اضغط على زر النسخ وصُدِّق في ملف نمطك.

الميزات الرئيسية

الميزة	الفائدة
التحكم في الزوايا الفردية	تعيين كل زاوية بشكل مستقل لأشكال مميزة
ربط / فصل الزوايا	التبديل بين الزوايا الموحدة والزاوية المخصصة
6 نماذج مسبقة	البدء السريع مع أنماط border-radius الشائعة
تحكم في العرض والارتفاع	مطابقة أبعاد العنصر الفعلي
معاينة حية	رؤية التحديث الفوري عند تعديل الم滑动条
النسخ إلى الحافظة	تصدير CSS بضغطة واحدة

فهم خاصية CSS border-radius

القاعدة

تقبل خاصية border-radius ما يصل إلى أربعة قيم، واحدة لكل زاوية:

border-radius: top-left top-right bottom-right bottom-left;

نمط القيمة	الزوايا المتأثرة
16px	جميع الزوايا الأربعة متساوية
16px 8px	الزاوية اليسرى العلوية + الزاوية اليمنى السفلى / الزاوية اليمنى العلوية + الزاوية اليسرى السفلى
16px 8px 4px	الزاوية اليسرى العلوية / الزاوية اليمنى العلوية + الزاوية اليسرى السفلى / الزاوية اليمنى السفلى
16px 8px 4px 2px	كل زاوية بشكل فردي

البكسل مقابل النسب المئوية

• البكسل (px): نصف قطر ثابت بغض النظر عن حجم العنصر.
• النسب المئوية (%): نسبية إلى أبعاد العنصر. 50% على مربع يُنشئ دائرة مثالية؛ 50% على مستطيل يُنشئ قوسًا.

استخدام النسب المئوية للأكواب واللهايات

يُنشئ border-radius: 50% دائرة مثالية عندما يكون العرض مساويًا للارتفاع. للأزرار على شكل حبات، استخدم قيمة بكسل كبيرة (مثل 999px) — هذا يضمن أن نصف القطر يتجاوز دائمًا نصف أصغر بعد، مما ينشئ أطرافًا منحنية تمامًا بغض النظر عن حجم العنصر.

مقارنة النماذج المسبقة

النموذج	القيم	الحالة
منحنية	16px موحدة	البطاقات، النماذج المُحَدَّدة، الصور
حبة	999px موحدة	الأزرار، التصنيفات، الرموز
كتلة عضوية	60px 40px 70px 30px	العناصر الزخرفية، الأقسام الرئيسية
ورقة	0 100px 0 100px	العناصر التفاعلية العضوية، المُقسِّمات الزخرفية
سقوط	0 100px 100px 0	الأدوات التوضيحية، الإشارات، المؤشرات
شكل مُشكل	30px 70px 50px 80px	الأشكال المجردة، الخلفيات

استخدامات واقعية

نمط الأزرار

أنشئ أزرار على شكل حبات باستخدام border-radius: 999px لتصميم حديث وودي يُستخدم في معظم أنظمة التصميم.

عناصر البطاقات

المنحنى البسيط (8–16px) يُناعم زوايا البطاقات ويُنشئ إدراكًا بصريًا دون إرباك.

صور الملف الشخصي

استخدم border-radius: 50% على الصور المربعة لخلق صور دائرية، شائعة في تطبيقات التواصل الاجتماعي واللوحات.

كتل زخرفية

قيم نصف القطر غير المتناسقة على العناصر الكبيرة تُنشئ أشكالًا عضوية شائعة في التصميم الحديث.

أدوات مخصصة

استخدم قيمًا مختلطة (مثل 8px 8px 8px 0) لخلق أداة توضيحية مع زاوية حادة تشير إلى العنصر المُشغّل.

نصائح لتحسين حافة الحدود

النصيحة	التفسير
ابق متسقًا	استخدم نفس نصف القطر عبر نظام التصميم (مثل 8px لصغير، 16px لكبير).
استخدم وحدات نسبية	لدائرات متجاوبة، استخدم 50% بدلًا من قيمة بكسل ثابتة.
قيم كبيرة للأكواب	استخدم 9999px أو 999px لضمان أطراف منحنية تمامًا.
تجنب التكرار	لا تستخدم نفس القيم في مواقع متعددة دون سبب.
تحقق من التوافق	تأكد من أن التصميم يعمل على جميع الأجهزة والمقاييس.

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

ما الذي يحدث عندما يكون حجم حافة الحدود أكبر من العنصر؟

عندما يكون نصف قطر border-radius أكبر من أبعاد العنصر، يُصبح العنصر دائريًا تمامًا.

هل يمكنني استخدام هذا المُنشئ على جميع الأجهزة؟

نعم. المُنشئ مُجيب تمامًا للحجم ويعمل على أي جهاز. تتم جميع الحسابات في متصفحك.

هل يدعم هذا المُنشئ جميع إصدارات المتصفحات؟

نعم. تدعم جميع إصدارات المتصفحات الحديثة، بما في ذلك Chrome، Firefox، Safari، وEdge.