Developer Toolsمولّد نصف قطر الحدود
أنشئ أشكال CSS معقدة بصريًا مع التحكم المستقل في كل زاوية. معاينة مباشرة ونسخ كود CSS الجاهز للاستخدام فورًا.
إعدادات الزوايا
الوحدة:
المعاينة وكود CSS
border-radius: 8px
مختصر
.element {
border-radius: 8px;
}كامل
.element {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}أدوات ذات صلة
حول مولّد نصف قطر الحدود
كيف يعمل
- اضبط كل زاوية باستخدام شرائط التمرير أو حقول الأرقام
- فعّل 'ربط جميع الزوايا' للتحكم في الزوايا الأربع في آنٍ واحد
- اختر الوحدة (px أو %) بحسب نوع الحجم المطلوب
- استخدم الإعدادات المسبقة لتطبيق أشكال شائعة كالدائرة والحبة والمربع
- خصّص خلفية المعاينة ولون العنصر للحصول على مظهر واقعي
- انسخ كود CSS المختصر أو الكامل بنقرة واحدة
حالات الاستخدام الشائعة
- تصميم أزرار وبطاقات وحقول إدخال بزوايا مدورة
- إنشاء تسميات وشارات بشكل حبة في تصميم الواجهة
- بناء أيقونات وصور مستخدمين دائرية بنصف قطر 50%
- توليد أشكال غير متماثلة فريدة للتصاميم الإبداعية
- بناء نماذج أولية لمكونات UI مع التحكم الدقيق في الزوايا
- تعلّم قيم CSS border-radius والتجريب بها
الأسئلة الشائعة
ما هو CSS border-radius؟
CSS border-radius هي خاصية تُقرّب زوايا إطار حدود العنصر. تقبل من قيمة إلى أربع قيم تحدد نصف قطر الزاوية العلوية اليسرى والعلوية اليمنى والسفلية اليمنى والسفلية اليسرى.
كيف أستخدم مولّد نصف قطر الحدود؟
استخدم شرائط التمرير أو حقول الأرقام لضبط كل زاوية بشكل مستقل. تتحدث المعاينة المباشرة فوريًا، ويمكنك نسخ كود CSS المولَّد بنقرة واحدة.
هل يمكنني تعيين قيمة مختلفة لكل زاوية؟
نعم. قم بإيقاف تشغيل خيار 'ربط جميع الزوايا' للتحكم في كل زاوية بشكل مستقل لإنشاء أشكال غير متماثلة.
ما الفرق بين CSS المختصر والكامل؟
الخاصية المختصرة border-radius تضبط الزوايا الأربع دفعة واحدة. الخصائص الكاملة (border-top-left-radius وغيرها) تضبط كل زاوية على حدة.
كيف أصنع دائرة باستخدام CSS border-radius؟
اضبط border-radius على 50% لعنصر مربع. استخدم الإعداد المسبق 'دائرة' في هذه الأداة لتطبيقه فورًا.
كيف أصنع شكل حبة/كبسولة؟
اضبط border-radius على قيمة كبيرة جدًا (مثل 9999px) لإنشاء شكل حبة. استخدم الإعداد المسبق 'حبة' للتطبيق بنقرة واحدة.
هل يدعم border-radius قيم النسبة المئوية؟
نعم. القيم النسبية تكون نسبة إلى أبعاد العنصر: 50% تنشئ شكلاً دائريًا لعنصر مربع. تدعم هذه الأداة وحدتَي البكسل (px) والنسبة المئوية (%).
ماذا تعني القيمتان في الاختصار border-radius؟
عند استخدام قيمتين، تنطبق الأولى على الزاويتين العلوية اليسرى والسفلية اليمنى، والثانية على الزاويتين العلوية اليمنى والسفلية اليسرى.
هل CSS المولَّد متوافق مع جميع المتصفحات؟
نعم. خاصية border-radius مدعومة في جميع المتصفحات الحديثة وInternet Explorer 9+.
هل يمكنني معاينة الشكل بلون خلفية؟
نعم. تعرض المعاينة المباشرة الشكل بلون خلفية قابل للتخصيص حتى ترى بالضبط كيف ستبدو الزوايا المدورة.
كيف أعيد القيم إلى الإعدادات الافتراضية؟
انقر على زر 'إعادة الضبط' لاستعادة جميع الزوايا إلى 8px، وهي القيمة الافتراضية المستخدمة في معظم أطر UI.
ما الإعدادات المسبقة المتاحة؟
تتضمن الأداة إعدادات مسبقة للأشكال الشائعة: مربع (0px)، خفيف (4px)، مدور (8px)، مدور جدًا (16px)، حبة (9999px)، ودائرة (50%).