مولد Border Radius في CSS

border-radius من أكثر خصائص CSS استخداماً. من الزوايا المستديرة البسيطة إلى الأشكال العضوية، للخاصية استخدامات متنوعة.

صياغة border-radius

/* كل الزوايا متساوية */
border-radius: 8px;

/* كل زاوية بشكل مستقل (عكس عقارب الساعة: يمين-أعلى، يسار-أعلى، يسار-أسفل، يمين-أسفل) */
border-radius: 8px 16px 8px 16px;

/* زاوية بيضاوية */
border-radius: 50% / 30%;

اتجاهات التصميم

• Squircle: border-radius: 30% — نمط أيقونات iOS
• Neumorphism: border-radius كبير مع ظلال
• Constructivist: بدون border-radius (زوايا حادة)
• Bubble: border-radius: 50% (دائرة كاملة)

border-radius في UX

• أزرار أساسية: 4-8px (احترافي)
• أزرار pill: 9999px (عصري)
• البطاقات: 8-16px (ناعم)
• النوافذ المنبثقة: 12-24px (ودّي)