Border Radius Generator
Generate CSS border-radius
8px
مخرجات CSS
border-radius: 8px;
حول هذه الأداة
تُقوّس خاصية border-radius زوايا العنصر. حين تتساوى القيم الأربع، يُستخدم اختصار بقيمة واحدة. القيم المختلفة تُنشئ أشكالاً غير متماثلة — شكل الحبة يستخدم 50% في جميع الزوايا، وشكل الورقة يتناوب بين 0% و50%.
انقر على أي رقم زاوية لإدخال قيمة مباشرةً، أو اسحب المنزلق المرتبط لتغيير الزوايا الأربع في آنٍ واحد. قم بإيقاف تثبيت جميع الزوايا للتحكم في كل زاوية بشكل مستقل.
كيفية الاستخدام
- أدخل قيماً في حقول الزوايا الأربع (أعلى-يسار، أعلى-يمين، أسفل-يسار، أسفل-يمين).
- فعّل تثبيت جميع الزوايا لضبط القيم الأربع في آنٍ واحد بالمنزلق.
- بدّل بين وحدتَي px و% حسب احتياجات التصميم.
- انقر على إعداد مسبق (حبة، ورقة، نقطة...إلخ) لتطبيق شكل محدد فوراً.
حالات الاستخدام
يستخدم مصممو واجهات المستخدم border-radius لإنشاء أزرار وبطاقات وأشكال أفاتار. يضبط المطورون الزوايا المقوّسة لتتوافق مع أنظمة تصميم العلامة التجارية. يشيع استخدام شكل الحبة (50%) في الوسوم والشارات. تُنشئ القيم غير المتماثلة أشكالاً عضوية كالورقة والنقطة للعناصر الزخرفية.
الأسئلة الشائعة
- ما الفرق بين px و%؟ — تُعطي px نصف قطر ثابتاً للزاوية بصرف النظر عن حجم العنصر. أما % فتكون نسبية لعرض وارتفاع العنصر — 50% على جميع الزوايا يُنشئ دائرة مثالية (إن كان العنصر مربعاً).
- هل يمكنني ضبط أنصاف أقطار مختلفة لكل زاوية؟ — نعم. قم بإلغاء تحديد تثبيت جميع الزوايا واكتب قيماً مختلفة في كل حقل زاوية.
- ماذا تعني المخرجات المختصرة؟ — حين تتساوى الزوايا الأربع، يكون المخرج قيمة واحدة. عند الاختلاف، يكون ترتيب CSS: أعلى-يسار، أعلى-يمين، أسفل-يمين، أسفل-يسار.