DukoTools

CSS Border Radius Generator

جديد

إنشاء border-radius بـ CSS مع تحكم بسيط أو بيضاوي لكل زاوية وإعدادات مسبقة للأشكال.

مجاني للأبد
بدون تسجيل
لا يخزن ملفات

الإعدادات المسبقة

border-radius: 8px;

أدوات مشابهة

CSS Box Shadow Generator

developer

Create multi-layer CSS box shadows with live preview, 12 presets, and Tailwind equivalents.

Try it free

CSS Gradient Generator

developer

Build linear, radial, and conic gradients with presets and copy-ready CSS output.

Try it free

تضمين هذه الأداة

أضف هذه الأداة إلى موقعك أو مدونتك باستخدام iframe.

<iframe src="https://dukotools.com/tools/border-radius-generator?embed=1" width="100%" height="600" frameborder="0" allow="clipboard-write" loading="lazy" title="border-radius-generator tool"></iframe>

About CSS Border Radius Generator

يُنتج CSS Border Radius Generator نصف قطر حدودي صحيح لـ CSS لأي شكل بدءًا من الزوايا الدائرية البسيطة وحتى نصف القطر الإهليلجي المعقد ذي 8 قيم. يطبق الوضع البسيط نصف قطر متساويًا على الزوايا الأربع باستخدام شريط تمرير واحد. يوفر الوضع المتقدم أشرطة تمرير مستقلة لكل زاوية من خلال تبديل زوايا الارتباط. يؤدي تبديل نصف القطر الإهليلجي إلى فتح المجموعة الثانية المكونة من أربع قيم في نصف القطر الحدودي - نصف القطر X وY لكل زاوية بشكل مستقل. يتيح ذلك أشكالًا غير متماثلة مثل الدموع والأوراق والأشكال العضوية. تغطي الإعدادات المسبقة للأشكال: مربع، ومدور، وحبوب، ودائرة، وسكويركل، وورقة، ودمعة، وفقاعة دردشة. يُظهر الإخراج اختصار CSS الصالح الأكثر ضغطًا والفئة المكافئة لـ Tailwind.

الميزات الرئيسية

  • أوضاع بسيطة ومتقدمة

    وضع شريط التمرير الفردي أو أشرطة التمرير المستقلة لكل زاوية مع تبديل زوايا الارتباط.

  • وضع نصف قطر بيضاوي الشكل

    يفتح نصف القطر X وY لكل زاوية لاختصار CSS ذو 8 قيم كاملة.

  • معاينة في الوقت الحقيقي

    معاينة مستطيلة مباشرة توضح نصف قطر الحدود الحالي المطبق على الفور.

  • 8 إعدادات مسبقة للأشكال

    الإعدادات المسبقة: مربع، ومدور، وحبوب منع الحمل، ودائرة، وسكويركل، وورقة، ودمعة، وفقاعة الدردشة.

  • اختصار CSS مدمج

    يُنشئ الاختصار الصحيح الأكثر إحكاما باستخدام قواعد ضغط نصف القطر الحدودي.

  • يعادل الرياح الخلفية

    يُظهر فئة Tailwind المدورة* عند الاقتضاء.

كيفية الاستخدام

  1. 1

    اختر الوضع البسيط أو المتقدم

    الوضع البسيط للزوايا المتساوية، الوضع المتقدم للتحكم في كل زاوية.

  2. 2

    ضبط المتزلجون

    اسحب أشرطة تمرير نصف القطر الزاوية وشاهد تحديث شكل المعاينة في الوقت الفعلي.

  3. 3

    تمكين البيضاوي (اختياري)

    قم بتبديل نصف القطر الإهليلجي للحصول على نصف قطر X وY مستقل لكل زاوية للأشكال العضوية.

  4. 4

    أو قم بتحميل إعداد مسبق

    انقر فوق أي شكل مصغر تم إعداده مسبقًا لتحميل التكوين الخاص به.

  5. 5

    انسخ ملف CSS

    انسخ قاعدة CSS الكاملة أو قيمة نصف القطر الحدودي فقط.

حالات الاستخدام في العالم الحقيقي

تصميم الصورة الرمزية

يستخدم المطور الإعداد المسبق للدائرة لإنشاء نصف قطر الحدود: 50% لمكونات الصورة الرمزية للمستخدم.

تصميم مكون مخصص

يستخدم المصمم الوضع البيضاوي لإنشاء عنصر زخرفي على شكل ورقة لصفحة مقصودة ذات طابع طبيعي.

مكون البطاقة

يستخدم مطور واجهة المستخدم الوضع Rounded المسبق والوضع المتقدم لتطبيق زوايا علوية أكبر وزوايا سفلية أصغر لتصميم بطاقة مكدسة.

الأسئلة المتداولة

Related Free Tools

Explore these tools that work great alongside CSS Border Radius Generator:

CSS Box Shadow Generator

Create multi-layer CSS box shadows with live preview, 12 presets, and Tailwind equivalents.

CSS Gradient Generator

Build linear, radial, and conic gradients with presets and copy-ready CSS output.