مولد border-radius في CSS
اضبط الزوايا المستديرة بصريا: اربط كل الزوايا أو عدّل كل زاوية، بالبكسل أو النسبة المئوية، واصنع دوائر وأشكالا عضوية، ثم انسخ كود CSS أو SCSS أو Tailwind.
جارٍ تحميل مولد border-radius في CSS…
ملفاتك لا تغادر جهازك أبدًا
طريقة استخدام مولد border-radius في CSS
- 1
افتح مولد border-radius في CSS في هذه الصفحة. تُحمَّل مباشرة في متصفحك.
- 2
أضف ملفك أو نصك أو القيم، واضبط الإعدادات.
- 3
انسخ النتيجة أو نزّلها. لا يُرفع أي شيء ولا يُخزَّن.
عن هذه الأداة
تجعل خاصية CSS border-radius زوايا الصناديق والأزرار والبطاقات والصور مستديرة. يتيح لك مولد border-radius هذا تحريك أشرطة التمرير ورؤية الشكل يتغير في معاينة مباشرة، ثم نسخ الكود. اربط الزوايا الأربع لاستدارة متساوية، أو افصلها لتشكيل كل زاوية على حدة، من البطاقات الهادئة إلى الدوائر المثالية والأشكال العضوية.
طريقة الاستخدام
- حرّك الشريط لجعل كل الزوايا مستديرة دفعة واحدة، أو افصل الزوايا واضبط كل واحدة.
- بدّل بين px لاستدارة ثابتة و% لأشكال تتغير مع حجم العنصر.
- استخدم الإعدادات الجاهزة: مربع ومستدير ودائرة وغيرها، أو اختر شكلا عشوائيا.
- غيّر لون الصندوق وخلفية المعاينة لتناسب تصميمك.
- انسخ كود CSS أو SCSS أو Tailwind.
أشكال شائعة
| الشكل | CSS |
|---|---|
| بطاقة هادئة | border-radius: 8px; |
| زر على شكل حبة | border-radius: 9999px; |
| دائرة (عنصر مربع) | border-radius: 50%; |
| زاوية واحدة مستديرة | border-radius: 0 24px 0 0; |
| ورقة شجر | border-radius: 0 50% 0 50%; |
نصائح
- القيم بالنسبة المئوية تتغير مع حجم العنصر، فيبقى الشكل نفسه على أي شاشة.
- العناصر المتداخلة: أعط العنصر الداخلي نصف قطر أصغر من العنصر الأب (نصف القطر الخارجي ناقص الحشو) لمنحنيات متناسقة.
- الصور تحتاج overflow: hidden على العنصر الأب، أو تطبيق نصف القطر مباشرة على img.
- حافظ على الاتساق: استخدم مقاسين أو ثلاثة لنصف القطر في نظام التصميم كله.
أضف عمقا باستخدام مولد ظلال CSS، وابنِ التخطيطات باستخدام مولد Flexbox.
الأسئلة الشائعة
كيف أصنع دائرة باستخدام CSS؟
أعط عنصرا مربعا border-radius: 50%. على المستطيل تعطي القيمة نفسها شكلا بيضاويا.
هل يمكنني جعل بعض الزوايا فقط مستديرة؟
نعم. افصل الزوايا واضبط كل واحدة، أو استخدم صيغة القيم الأربع: أعلى اليسار، أعلى اليمين، أسفل اليمين، أسفل اليسار.
هل أستخدم px أم %؟
استخدم px لاستدارة ثابتة في الأزرار والبطاقات، و% للأشكال التي يجب أن تتغير مع حجم العنصر مثل الدوائر.
كيف أصنع زرا على شكل حبة؟
استخدم نصف قطر كبيرا جدا مثل 9999px. تصبح الزوايا مستديرة بالكامل مهما كان ارتفاع الزر.
هل يمكنني الحصول على أصناف Tailwind؟
نعم. اختر تصدير Tailwind لتحصل على أصناف rounded أو قيم مخصصة لشكلك.
هل تعمل border-radius على الصور؟
نعم. طبّقها على عنصر img، أو على عنصر أب يحمل overflow: hidden.