مولّد حواف CSS المستديرة

صمّم خاصية border-radius في CSS بصرياً — تحكم في الزوايا الأربع فردياً أو معاً. شاهد معاينة مباشرة للنتيجة وانسخ الشفرة.

الاستوديو · محيط محايد
20px

  

الميزات

التحكم في الزوايا الأربع
وضع موحّد أو مستقل
شريط تمرير وإدخال رقمي
معاينة حية مع كود CSS

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

1. اسحب شريط نصف القطر — البطاقة المحايدة تعاين الزوايا بالحجم الحقيقي.

2. بدّل إلى «لكل زاوية» لضبط كل زاوية على حدة.

3. انسخ CSS — يَستخدم أقصر صيغة صحيحة.

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

الزوايا المستديرة سطر واحد من CSS، لكن ضبط القيمة أسهل عندما تراها. يعرض هذا المولّد خاصية border-radius على بطاقة محايدة بحجمها الحقيقي بينما تسحب منزلقًا واحدًا أو تشكّل كل زاوية على حدة. ثم يكتب أقصر تعريف صالح: قيمة واحدة عندما تتطابق الزوايا كلها، وقيمتين أو ثلاثًا أو أربعًا عندما تختلف، بالترتيب: أعلى اليسار، أعلى اليمين، أسفل اليمين، أسفل اليسار. تناسب الأنصاف الصغيرة من 4 إلى 8 بكسل الأزرار وحقول الإدخال، ويمنح نطاق 12–24 بكسل البطاقات مظهرًا ودودًا، بينما تحوّل القيم الكبيرة جدًا العناصر القصيرة إلى أشكال حبوب. بدّل خلفية المسرح لترى كيف يبدو الشكل على الأسطح الفاتحة والداكنة قبل نسخ CSS إلى ورقة الأنماط.

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

ما ترتيب قيم border-radius الأربع؟
باتجاه عقارب الساعة بدءًا من الزاوية العلوية اليسرى: أعلى اليسار، أعلى اليمين، أسفل اليمين، أسفل اليسار. ومع قيمتين، تنطبق الأولى على أعلى اليسار وأسفل اليمين، والثانية على أعلى اليمين وأسفل اليسار. هذا الترتيب ثابت ولا ينعكس في الصفحات ذات الاتجاه من اليمين إلى اليسار.
كيف أصنع زرًا على شكل حبة دواء أو دائرة؟
لشكل الحبة، استخدم نصف قطر لا يقل عن نصف ارتفاع العنصر، أو ببساطة قيمة كبيرة جدًا مثل 9999px. وللدائرة، اجعل عرض العنصر وارتفاعه متساويين واضبط border-radius على 50%.
لماذا تُقص زاويتي المستديرة أو تظهر الخلفية من خلالها؟
قد تتجاوز العناصر الفرعية حدود الزاوية المستديرة. أضف overflow: hidden إلى الحاوية، أو امنح العنصر الفرعي نصف قطر مطابقًا، لتتبع الصور والخلفيات الانحناء.
هل يمكنني إنشاء زوايا بيضاوية؟
تسمح CSS بأنصاف أقطار أفقية وعمودية منفصلة بشرطة مائلة، مثل border-radius: 50% / 20%. يركّز هذا المولّد على الزوايا الدائرية بالبكسل التي تغطي معظم أعمال الواجهات، ويمكنك إضافة صيغة الشرطة المائلة يدويًا للأشكال الخاصة.
هل تؤثر border-radius على التخطيط أو مساحة النقر؟
لا. هي تغيّر فقط طريقة رسم العنصر وقصّه. يحتفظ العنصر بصندوقه المستطيل في التخطيط، ويظل النقر في الزوايا الشفافة مسجلًا على العنصر.

أدوات ذات صلة