مولّد نصف قطر الحدود

كيف يعمل

border-radius بسيط إلى أن تريد تدوير ثلاث زوايا وإبقاء واحدة مربعة، وعندها يضطر الجميع إلى البحث عن ترتيب القيم الأربع.

الترتيب، إلى الأبد

أعلى اليسار، أعلى اليمين، أسفل اليمين، أسفل اليسار — في اتجاه عقارب الساعة بدءًا من أعلى اليسار. وينطبق الترتيب نفسه، باتجاه عقارب الساعة من أعلى اليسار، على الصيغ المختصرة لـ margin وpadding وborder أيضًا، وهذا يستحق حفظه مرة واحدة.

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

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

شكل الحبّة

نصف القطر الأكبر من نصف ارتفاع العنصر يُقصّ إلى نصفه تمامًا، ولهذا ينتج border-radius: 999px شكل حبّة بشكل موثوق أيًّا كان الارتفاع. وهو أمتن من حساب القيمة الصحيحة، لأنه يظل يعمل حين يتغير المحتوى.

حين تبدو الزوايا خاطئة في العناصر المتداخلة

يحتاج الصندوق المستدير داخل صندوق مستدير آخر إلى نصف قطر أصغر للداخلي، مخفَّضًا بمقدار الحشو بينهما، وإلا فلن تكون المنحنيات متحدة المركز. وهي تفصيلة صغيرة تجعل البطاقات تبدو متقنة الصنع.