مولّد استدارة الحواف (Border Radius)
مولّد استدارة الحواف يتيح لك ضبط كل زاوية من زوايا العنصر الأربع بشكل مستقل أو مرتبط معًا، مع معاينة حية فورية، ثم نسخ كود border-radius الجاهز.
أدوات التصميم وCSS يعمل محليًا بالكامل
تتم كل المعالجة داخل جهازك ولا يُرسل أي شيء لأي خادم.
كود CSS
border-radius: 16px;
ما الذي تفعله هذه الأداة
تضبط استدارة زوايا العنصر، كل زاوية على حدة أو كلها معًا، مع معاينة وشيفرة CSS.
متى تستخدمها
- بطاقة أو زر تريد زواياه مدوّرة بمقدار محدّد.
- شكل غير متماثل الزوايا كفقاعة محادثة.
- توحيد استدارة الزوايا في نظام تصميم.
- تجرّب درجات استدارة قبل اعتمادها.
طريقة الاستخدام
- اضبط «أعلى اليسار» و«أعلى اليمين» و«أسفل اليمين» و«أسفل اليسار».
- راقب المعاينة.
- انسخ شيفرة CSS.
مثال عملي
المُدخَل
استدارة كبيرة في ثلاث زوايا وصفر في الرابعة.
الناتج
شكل يشبه فقاعة المحادثة، بشيفرة CSS جاهزة.
حدود الأداة
- الاستدارة التي تتجاوز نصف أصغر بُعد في العنصر تتحول إلى شكل بيضوي أو دائري.
- الاستدارة على عنصر له حدود أو ظل تؤثر عليهما أيضًا.
- الأداة تولّد الاستدارة ولا تعالج اقتصاص المحتوى داخل العنصر.
الخصوصية والمعالجة
الاستدارة تُحسب على جهازك ولا يغادره شيء.
ملاحظات تقنية
- ضبط كل زاوية على حدة هو ما يتيح الأشكال غير المتماثلة التي يصعب كتابتها يدويًا بترتيبها الصحيح.
الأسئلة الشائعة
نعم، يمكنك ضبط قيمة استدارة كل زاوية من الزوايا الأربع بشكل مستقل، ومعاينة الشكل الناتج فورًا قبل نسخ كود CSS.