مولّد الزوايا المستديرة CSS: معاينة حية وأقصر كود

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

اختر الوحدة: px لنصف قطر ثابت، أو % لنصف قطر يتبع حجم الصندوق.
اكتب نصف قطر لكل زاوية تحت أعلى اليسار وأعلى اليمين وأسفل اليمين وأسفل اليسار. والزاوية التي قيمتها 0 تكون مربعة.
ضع علامة على زوايا بيضاوية (نصف قطر رأسي منفصل) إذا كان يجب أن تكون الزاوية أعرض مما هي طويلة، واكتب نصف قطرها الرأسي.
انسخ تعريف CSS والصقه في قاعدة العنصر لديك.

كيف تُكتب الزوايا الأربع

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

القواعد مذكورة في مواصفات CSS للخلفيات والحدود (باللغة الإنجليزية). كل نصف قطر طول أو نسبة مئوية من الصندوق، ولا يحتاج نصف القطر الصفري إلى وحدة.

border-radius: top-left top-right bottom-right bottom-left / vertical top-left vertical top-right vertical bottom-right vertical bottom-left

أقصر صيغة

تحذف الأداة كل قيمة يكررها الاختصار على أي حال. فإذا كانت زاوية أسفل اليسار تساوي أعلى اليمين لا تُكتب، وإذا كانت أسفل اليمين تساوي أعلى اليسار تُحذف القيمة الثالثة كذلك. والزوايا الأربع المتساوية تصبح قيمة واحدة، فيُكتب 12px 12px 12px 12px هكذا: 12px.

تُكتب الشرطة المائلة فقط إذا اختلف نصف قطر رأسي عن أفقي. وبدون زوايا بيضاوية يساوي كل نصف قطر رأسي نظيره الأفقي، فلا تظهر شرطة مائلة.

مثال محلول: بطاقة بزوايا بيضاوية

اضبط زاوية أعلى اليسار على 40 px أفقياً و20 px رأسياً، وزاوية أعلى اليمين على 20 px و10 px، وأسفل اليمين على 40 px و20 px، وأسفل اليسار على 20 px و10 px. فتكون الأنصاف الأفقية 40 و20 و40 و20، ويكتبها الاختصار 40px 20px. والأنصاف الرأسية 20 و10 و20 و10، ويكتبها 20px 10px.

التعريف هو border-radius: 40px 20px / 20px 10px;، وتُظهر المعاينة زوايا أعرض مما هي طويلة.

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

لماذا توجد مجموعتان من الأرقام يفصل بينهما شرطة مائلة؟

تعطي المجموعة الأولى نصف القطر الأفقي لكل زاوية، وتعطي المجموعة بعد الشرطة المائلة نصف القطر الرأسي. ومن دون شرطة مائلة تكون الزاوية قوساً دائرياً بنصف القطر نفسه في الاتجاهين.

ماذا تفعل قيمة نصف القطر بالنسبة المئوية؟

تُحسب النسبة من عرض الصندوق للنصف الأفقي، ومن ارتفاعه للنصف الرأسي. فنسبة 50٪ على كل زاوية تعطي دائرة أو قطعاً بيضاوياً، بحسب ما إذا كان الصندوق مربعاً أم لا.

لماذا يكون الترتيب أعلى اليسار ثم أعلى اليمين ثم أسفل اليمين ثم أسفل اليسار؟

تتبع الصيغة المختصرة الترتيب الدائري مع عقارب الساعة الذي تستعمله خصائص الصندوق الأخرى، بدءاً من أعلى اليسار. وبعد أن تعرف هذا الترتيب تسهل قراءة الصيغ الأقصر ذات القيمتين أو الثلاث.

هل تتحقق الأداة من نصف القطر مقارنةً بحجم الصندوق؟

لا. تتحقق الأداة فقط من أن كل نصف قطر رقم أكبر من الصفر أو يساويه، وأنه ضمن الحد 1000 px أو 100٪. فإذا تجاوز جاران مجموعهما ضلع الصندوق، يصغّرهما المتصفح.

هل يُحفظ ما أكتبه أو يُرسل إلى خادم؟

لا. تُصنع المعاينة وكود CSS داخل متصفحك. لا يُخزَّن شيء ولا يُرسل إلى خادمنا، فانسخ التعريف قبل أن تغادر الصفحة.

المصادر

آخر مراجعة للأرقام والنص: الثلاثاء، 30 جمادى الأولى 1448 بعد الهجرة.