أداة إنشاء الزوايا الدائرية

اسحب أشرطة التمرير لتشكيل كل زاوية من زوايا مربع المعاينة، ثم انسخ كود border-radius الناتج. اربط الزوايا الأربع معًا للحصول على مستطيل دائري بسيط، أو حرّرها لبناء أشكال حبوب الدواء وأشكال الأوراق والأشكال العضوية غير المتماثلة.

ما هي هذه الأداة؟

خاصية border-radius هي خاصية CSS التي تدوّر زوايا العنصر. عند كتابتها يدويًا تأخذ أربع قيم بترتيب ثابت — أعلى اليسار، أعلى اليمين، أسفل اليمين، أسفل اليسار — وهو ترتيب يسهل الخلط بينه، خصوصًا عندما تختلف الزوايا الأربع عن بعضها.

تزيل هذه الأداة أي تخمين: حرّك شريط التمرير، شاهد الزاوية تستدير في المعاينة الحية، واقرأ كود CSS الدقيق من مربع الكود المُولَّد. مفتاح قفل واحد يبدّل بين نصف قطر موحّد (الزوايا الأربع متساوية، وهي الحالة الأكثر شيوعًا) وأربعة أشرطة تمرير مستقلة لأشكال عضوية وغير متماثلة.

لماذا تستخدمها؟

تُحدَّث المعاينة الحية فورًا أثناء السحب — دون الحاجة لتعديل CSS وتحديث الصفحة لرؤية النتيجة.
قفل بنقرة واحدة للحالة الشائعة 'نفس نصف القطر لكل الزوايا'؛ افتحه للحصول على أزرار على شكل حبة دواء أو فقاعات حوار أو أشكال بلوب.
تُخرج الأداة الصيغة المختصرة بقيمة واحدة عندما تتطابق كل الزوايا، أو الصيغة الكاملة بأربع قيم عندما تختلف — جاهزة للنسخ واللصق في الحالتين.
تعمل بالكامل داخل متصفحك. لا يُرسل أي شيء تُدخله إلى أي مكان.
مجانية، دون تسجيل، وتعمل على الهاتف المحمول.

كيفية الاستخدام

اترك خيار 'قفل جميع الزوايا' مفعّلاً واسحب أي شريط تمرير لضبط نصف قطر موحّد للمربع بالكامل.
ألغِ تفعيل القفل للتحكم بكل زاوية بشكل مستقل — مفيد لأشكال حبوب الدواء والدموع والبطاقات غير المتماثلة.
راقب مربع المعاينة يتحدث مباشرة أثناء تعديل كل شريط تمرير.
انسخ كود CSS المُولَّد من مربع الكود والصقه في ورقة الأنماط الخاصة بك.

مثال

الإدخال

أعلى اليسار: 40px، أعلى اليمين: 8px، أسفل اليمين: 40px، أسفل اليسار: 8px

الناتج

border-radius: 40px 8px 40px 8px;

عدم تطابق الزوايا المتقابلة على هذا النحو ينتج عنه ملامح ورقة نبات أو بتلة زهرة — تأثير شائع في تصميم البطاقات والشارات.

px أم % — أي وحدة يجب أن أستخدم؟

تُخرج هذه الأداة قيمًا بالبكسل، وهو الخيار الافتراضي الصحيح لمعظم أعمال واجهة المستخدم: الأزرار والبطاقات وحقول الإدخال حيث تريد نصف قطر زاوية ثابتًا ومتوقعًا بغض النظر عن حجم العنصر.

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

أنماط border-radius الشائعة

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

الدمج مع ظل

نادرًا ما تظهر الزوايا الدائرية بمفردها — تحتاج البطاقات والأزرار عادةً إلى بعض الظل لإضافة عمق أيضًا. استخدم أداة إنشاء ظل الصندوق لضبط ظل انسدال وتطبيق كلا مقطعي CSS المُولَّدين على نفس العنصر.

→ أداة إنشاء ظل الصندوق

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

ما الفرق بين border-radius وترتيب الزوايا؟

تتبع صيغة CSS المختصرة دائمًا الترتيب: أعلى اليسار، أعلى اليمين، أسفل اليمين، أسفل اليسار، بهذا الترتيب، في اتجاه عقارب الساعة بدءًا من أعلى اليسار. أشرطة التمرير الأربعة لهذه الأداة موسومة لتطابق هذا الترتيب، لذا لن تحتاج أبدًا لتذكره بنفسك.

هل يمكنني استخدام وحدات مختلفة لكل زاوية؟

نعم، في CSS الفعلي يمكنك مزج px و% و em و rem عبر الزوايا، رغم أن ذلك نادر في الممارسة العملية. تُولّد هذه الأداة قيم px موحّدة للتبسيط — استبدل أي قيمة فردية إلى % أو وحدة أخرى مباشرة في ورقة الأنماط إذا احتجت لوحدات مختلطة.

لماذا ينتج عن border-radius: 50% أحيانًا شكل بيضاوي بدلاً من دائرة؟

لأن النسب المئوية تكون نسبية لكل محور بشكل مستقل — نصف القطر الأفقي هو نسبة مئوية من عرض العنصر، ونصف القطر الرأسي نسبة مئوية من ارتفاعه. على عنصر مربع (عرض وارتفاع متساويان) ينتج ذلك دائرة مثالية؛ وعلى مستطيل ينتج شكلاً بيضاويًا.

هل تعمل خاصية border-radius على صور الخلفية والحدود أيضًا؟

نعم — تقصّ border-radius خلفية العنصر وحدوده (وفي المتصفحات الحديثة) ظله box-shadow ليتخذ الشكل الدائري. لا تقصّ المحتوى الفرعي الذي يفيض إلا إذا ضبطت أيضًا overflow: hidden على العنصر الأب.

هل هناك حد أقصى لحجم نصف القطر؟

لا يوجد حد صارم — إذا تجاوز نصف القطر نصف عرض العنصر أو ارتفاعه، تُقيّده المتصفحات بحيث يلتقي المنحنيان على ذلك الجانب تمامًا في المنتصف، وهذه هي الطريقة التي يتحول بها المربع إلى دائرة مثالية أو شكل حبة دواء.

كيف أصنع شكل حبة دواء أو دائرة مثالية؟

لشكل حبة دواء (كبسولة)، اضبط نصف القطر على نصف ارتفاع العنصر على الأقل — والحيلة الشائعة هي border-radius: 9999px، وهي تعمل عند أي ارتفاع لأن المتصفح يحدّ المنحنى تلقائيًا. تحتاج الدائرة المثالية لأمرين: عرض وارتفاع متساويان، بالإضافة إلى border-radius: 50%.