مشكلة في تدوير حواف الصورة عند استخدام border-radius 50%

الخاصية border-radius:50% تجعل الصورة دائرة في حالة فقط كانت الصورة لها نفس العرض ونفس الإرتفاع , عدا ذلك تجعلها شبه دائرية, لتصبح دائرية يجب أن يكون للصورة نفس العرض والإرتفاع, على سبيل المثال يكون عرضها 200بيكسل وإرتفاعها 200 بيكسل, أو أي رقمين متساويين

إن لم تستطع تحديد عرض مناسب بغير استخدام النسبة المئوية ليتساوى بعدي الصورة، ضف الخاصية التالية للحاوية الخاصة بالصورة

padding-top: 100%

 وإن لم تكن الصورة ابن مباشر للحاوية و لم تعمل الخاصية السابقة اضف

margin-top: 100%

لعنصر الصورة نفسه. يفترض أن هذه التنسيقات تعمل على جعل العنصر له نفس الطول والعرض