تقريب الزوايا

طبّق border-radius: 50% على عنصر مربع لإنشاء دائرة مثالية. اضبط الزوايا الأربع جميعها على 50٪.

نعم، يمكن أن يحتوي border-radius على أربع قيم منفصلة بالترتيب: أعلى اليسار، أعلى اليمين، أسفل اليمين، أسفل اليسار. وهذا يتيح أشكالاً فريدة غير متماثلة.

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

تعني 50% "نصف كل ضلع"، فما لم يكن العنصر مربّعاً اختلف نصف القطر الأفقي عن الرأسي وحصلت على شكل بيضوي. وللحصول على دائرة حقيقية اجعل width وheight بالقيمة نفسها أو أضف aspect-ratio: 1. وإن أردت شكل الكبسولة لزر يتبع عرضه نصّه، فاستخدم قيمة ثابتة كبيرة مثل 9999px بدل 50%، فتبقى الأطراف أنصاف دوائر تامة مهما كان الارتفاع.