مولد زوايا الحدود CSS — أداة مجانية على الإنترنت

ما هو مولد زوايا الحدود CSS؟

مولد زوايا حدود CSS مجاني عبر الإنترنت. اضبط نصف قطر الزوايا الأربع باستخدام أدوات تحكم مرئية.

تتحكم خاصية CSS border-radius في استدارة زوايا العناصر، ويمتد تنوعها إلى ما هو أبعد بكثير من المستطيلات المستديرة البسيطة. بضبط كل زاوية بشكل مستقل، يمكنك إنشاء أشكال حبوب ودوائر وأشكال غير متماثلة وأشكال عضوية معقدة المظهر — كل ذلك بخاصية CSS واحدة. يوفر مولد CSS border-radius تحكمًا بمنزلق فردي لكل الزوايا الأربع مع معاينة مباشرة تتحدّث فورًا.

لكل زاوية — اليسار العلوي واليمين العلوي واليمين السفلي واليسار السفلي — منزلق خاص بها، مما يتيح لك إنشاء أشكال غير متماثلة تمامًا. يغير مفتاح الوحدة بين البكسل (px) والنسبة المئوية (%) السلوك بشكل كبير. تنشئ قيم البكسل زوايا نصف قطر ثابتة تبقى بنفس الحجم بغض النظر عن أبعاد العنصر. تربط قيم النسبة المئوية نصف القطر بحجم العنصر، وهذه هي الطريقة التي تنشئ بها دوائر مثالية (border-radius: 50% على مربع).

تغطي أربعة إعدادات مسبقة حالات الاستخدام الأكثر شيوعًا. ينشئ Circle قيمة border-radius: 50% لدائرة مثالية (أو قطع ناقص على عناصر غير مربعة). ينشئ Pill شكلًا بنهايات دائرية بالكامل (border-radius: 9999px)، مفيد لأزرار الشارات والوسوم. يطبّق Card استدارة 8px دقيقة مناسبة لمكوّنات البطاقات والحاويات. يطبّق Rounded استدارة 8px على جميع الزوايا، مناسبة للأزرار وحقول الإدخال في النماذج.

يعرض كود CSS المُنشأ صيغة الاختزال. إذا كانت الزوايا الأربع بنفس القيمة، يُخرِج قيمة واحدة (على سبيل المثال، border-radius: 8px). إذا كانت الزوايا مختلفة، يُخرِج صيغة القيم الأربع بترتيب اتجاه عقارب الساعة (يسار علوي، يمين علوي، يمين سفلي، يسار سفلي). الكود جاهز للنسخ إلى ورقة الأنماط الخاصة بك.

حالات استخدام واقعية لـ مولد زوايا الحدود CSS

إنشاء زر مستدير بشكل حبة

يستخدم نظام التصميم الخاص بك أزرارًا بشكل حبة بارتفاع 24 بكسل ونهايات مستديرة بالكامل. حدد الإعداد المسبق «Pill» لـ border-radius: 9999px. تعرض معاينة الزر شكل الحبة. انسخ CSS وطبّقه على مكوّن الزر الخاص بك. اضبط قيم الزوايا بشكل فردي إذا أردت مظهرًا أكثر نعومة.

تصميم شكل غير متماثل لقسم البطل

يحتاج قسم البطل في صفحة هبوط إلى شكل مميز: يسار علوي عند 0px، يمين علوي عند 40px، يمين سفلي عند 0px، يسار سفلي عند 40px. اضبط منزلق كل زاوية بشكل مستقل. تعرض المعاينة شكلاً غير متماثل فريدًا. CSS المُنشأ هو border-radius: 0 40px 0 40px.

إنشاء صورة رمزية دائرية بنصف قطر النسبة المئوية

صورة رمزية مستخدم هي صورة مربعة بدقة 64×64 بكسل. بدّل الوحدة إلى % واضبط الزوايا الأربع على 50%. تعرض المعاينة دائرة مثالية. CSS المُنشأ هو border-radius: 50%، الذي يعمل على أي عنصر مربع بغض النظر عن الحجم.

لماذا نستخدم مولد زوايا الحدود CSS؟

Individual control for all 4 corners
px and % unit toggle
preview box حي
4 presets: Circle, Pill, Card, Rounded

كيفية استخدام مولد زوايا الحدود CSS — خطوة بخطوة

اضبط sliders for each corner (top-left, top-right, bottom-right, bottom-left).

بدّل between px and % units.

عاين the border radius live.

انسخ the CSS code.

من هو مولد زوايا الحدود CSS الأنسب له؟

UI design
button styling
card design
تطوير الويب

نصائح احترافية لـ مولد زوايا الحدود CSS

1استخدم قيم البكسل للعناصر ذات الحجم الثابت (الأزرار والبطاقات) حيث يجب أن يبقى نصف قطر الزاوية ثابتًا. استخدم قيم النسبة المئوية للعناصر المتجاوبة حيث يجب أن يتدرج نصف القطر مع العنصر.
2يستخدم الإعداد المسبق «Pill» قيمة بكسل كبيرة جدًا (9999px) بدلاً من 50% لأن 50% على مستطيل تنشئ قطعًا ناقصًا، وليس حبة. تضمن قيمة البكسل الكبيرة نهايات مستديرة بالكامل على أي عنصر مستطيل.
3لشكل «squircle» (مربع بزوايا مستديرة قليلاً الشائع في iOS)، استخدم حوالي 10-12% من border-radius على جميع الزوايا. هذا يخلق مظهرًا أنعم من قيم البكسل الصغيرة.
4عند استخدام قيم النسبة المئوية، يُحسب نصف القطر نسبةً إلى عرض العنصر (للأيسر/الأيمن) وارتفاعه (للأعلى/الأسفل). تخلق النسب المئوية المختلفة على الزوايا الأفقية مقابل الرأسية زوايا بيضاوية.

مولد زوايا الحدود CSS — الأسئلة الشائعة

ما هو border-radius in CSS؟

border-radius rounds the corners of an element. It accepts 1-4 values for each corner. For example, border-radius: 10px 20px 30px 40px sets top-left, top-right, bottom-right, and bottom-left respectively.

How to make a circle with CSS?

حدد border-radius: 50% on a square element (equal width and height). This creates a perfect circle.

Will the generated CSS work in all browsers?

The CSS generators produce W3C-standard code that works in Chrome, Firefox, Safari, and Edge. Vendor prefixes are included where needed for older browser versions.

Can I copy the generated code directly?

Yes. Each generator provides a copy button that places the code on your clipboard. The code is ready to paste into your project — no cleanup or modification needed.

Is مولد زوايا الحدود CSS really free to use?

Yes, مولد زوايا الحدود CSS is completely free with no hidden charges, no usage limits, and no premium tiers. You can use it as often as you need without signing up or providing any personal information.

هل أنت مستعد لاستخدام مولد زوايا الحدود CSS؟

أداة مجانية على الإنترنت — تعمل في متصفحك، بدون تسجيل. ابدأ في استخدامها الآن.

جربها الآن