النتائج مقدَّمة لأغراض إعلامية فقط وقد تحتوي على أخطاء. يُرجى التحقق من المعلومات المهمة بشكل مستقل. استخدام هذه الأداة على مسؤوليتك الخاصة.
ماذا تفعل هذه الأداة
تتيح لك أداة توليد استدارة الحدود تدوير كل زاوية من زوايا الصندوق على حدة بأربعة منزلقات، من 0 إلى 100 بكسل، ومشاهدة الشكل في معاينة حية. والنتيجة تعريف border-radius واحد يمكنك لصقه في ملف الأنماط. تبدأ الزوايا الأربع كلها عند 20px.
تُكتب القيم بالترتيب الذي تتوقعه CSS: أعلى اليسار، أعلى اليمين، أسفل اليمين، أسفل اليسار، باتجاه عقارب الساعة بدءًا من الزاوية العلوية اليسرى. القيم المتساوية تعطي بطاقة مستديرة الزوايا بالتساوي، والقيم المختلفة تعطي فقاعات الكلام والألسنة (tabs) وأشكال الأوراق وغيرها من التصاميم غير المتماثلة. وتعمل الصيغة المختصرة في كل المتصفحات الحالية دون بادئات.
متى تستخدمها
- تنسيق البطاقات والأزرار وحقول الإدخال لتطابق نصف قطر الزوايا المعتمد في نظام التصميم.
- تدوير الزاويتين العلويتين فقط للسان تبويب، أو الزاويتين السفليتين لقائمة منسدلة.
- إنشاء شكل فقاعة محادثة بزاوية حادة واحدة.
- تجربة أنصاف أقطار مختلفة بسرعة بدلًا من تعديل CSS وإعادة تحميل الصفحة.
مثال عملي
المدخلات
أعلى اليسار 24، أعلى اليمين 24، أسفل اليمين 4، أسفل اليسار 24المخرجات
border-radius: 24px 24px 4px 24px;أسئلة حول هذه الأداة
كيف أصنع دائرة مثالية؟
أعطِ عنصرًا مربعًا القيمة border-radius: 50%. تُحسب النسبة المئوية نسبةً إلى حجم العنصر، فيبقى دائريًا بأي عرض. أما الزر على شكل كبسولة (pill) فيستخدم بدلًا من ذلك قيمة كبيرة بالبكسل، مثل 999px.
لماذا تتجاوز الخلفية الزوايا المستديرة؟
قد ترسم العناصر الأبناء التي لها خلفية خاصة بها فوق الزوايا. أضف overflow: hidden إلى العنصر الأب المستدير، أو أعطِ العنصر الابن نصف القطر نفسه.
هل يمكن أن تكون الزاوية إهليلجية؟
نعم. تقبل CSS نصفَي قطر لكل زاوية يفصل بينهما خط مائل، مثل border-radius: 50px / 25px. تكتب الأداة الصيغة الدائرية الشائعة؛ عدّل الناتج لإضافة القيمة الثانية.
هل يؤثر border-radius في الظل أيضًا؟
نعم. يتبع box-shadow الحدود المستديرة، فتتطابق الزوايا. أنشئ الظل باستخدام أداة توليد ظل الصندوق CSS (Box Shadow) واجمع بين التعريفين.
هل هذه الأداة مجانية؟
نعم، إنها مجانية. دون تسجيل أو بريد إلكتروني. تظهر النتيجة في هذه الصفحة.
كيف أحصل على النتيجة؟
استخدم الأداة في هذه الصفحة. تظهر النتيجة هنا دون الحاجة إلى إرسالها بالبريد الإلكتروني.