خاصية الزوايا الدائرية border-radius

الصياغة

.card { border-radius: 12px; }
.avatar { border-radius: 50%; }
.pill { border-radius: 999px; }

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

<style>
  .shape { width: 84px; height: 84px; background: #7c5cff; display: inline-grid; place-items: center; color: white; margin: 4px; }
  .r1 { border-radius: 12px; }
  .r2 { border-radius: 50%; }
  .r3 { border-radius: 999px; width: 140px; height: 44px; background: #22d3ee; }
</style>
<div class="shape r1">12px</div>
<div class="shape r2">50%</div>
<div class="shape r3">pill 999px</div>

أهم القيم

💡 نصائح عملية

• وحّد نصف القطر عبر متغير --radius واحد — اتساق فوري لكل الواجهة
• عنصر داخلي يكسر تدوير أبيه؟ overflow: hidden على الأب يقصه بأناقة

⚠️ أخطاء شائعة

• 50% على مستطيل ينتج بيضاويًا غريبًا — الدائرة تحتاج مربعًا
• أنصاف أقطار مختلفة بكل مكان عشوائيًا — فوضى بصرية صامتة

خصائص ذات صلة