How do I create a perfect circle?

Apply border-radius: 50% to a square element to create a perfect circle. Set all four corners to 50%.

Can I set different values for each corner?

Yes, border-radius can have four individual values in the order: top-left, top-right, bottom-right, bottom-left. This allows unique asymmetric shapes.

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

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

Border Radius Previewer is a free online tool that visually adjusts the CSS border-radius property. Set each corner individually or all at once with real-time preview. Create circles, ellipses, and asymmetric shapes. Browser-based processing — completely free for web design.

ربط الكل

أعلى يسار: 20px

أعلى يمين: 20px

أسفل يسار: 20px

أسفل يمين: 20px

border-radius: 20px;

lock لا يتم إرسال الملفات إلى أي خادم

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

كيف تستخدم تقريب الزوايا؟

الأسئلة الشائعة حول تقريب الزوايا

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

كيف تستخدم تقريب الزوايا؟

الأسئلة الشائعة حول تقريب الزوايا

أدوات ذات صلة

مولّد الظل

اقتراح أزواج الخطوط

مولّد CSS Grid