منشئ استدارة الحواف

يحوّل العنصر المربع إلى دائرة تامة. للحصول على دائرة حقيقية، يجب أن يكون للعنصر عرض وارتفاع متساويان — مثلاً `width: 100px; height: 100px; border-radius: 50%`. نصف القطر 50% يلتقي في المنتصف على الجوانب الأربعة، مما ينشئ منحنىً تاماً. على عنصر غير مربع، ينتج 50% قطعاً ناقصة بدلاً من ذلك — أعرض من الارتفاع أو أطول من العرض، حسب أبعاد العنصر. هذه هي الطريقة الأكثر شيوعاً لعمل صور الصورة الرمزية الدائرية والأزرار المستديرة وحاويات الأيقونات في CSS.

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

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

الـ `border-radius` القياسي لا ينحني إلا للخارج (محدب). للحصول على زاوية مقلوبة أو مقعرة — النتوء الداخلي أو المنحنى المقطوع المستخدم في التذاكر والتبويبات وفقاعات الكلام — لا يمكنك استخدام `border-radius` وحده. التقنية الشائعة هي قناع التدرج الشعاعي: `mask: radial-gradient(circle 20px at top left, transparent 98%, black) top left / 51% 51% no-repeat ...`، مكرراً لكل زاوية تريد قضمها للداخل. البديل هو عنصر زائف موضعي (`::before`) بلون خلفية الصفحة مع `border-radius` محدب خاص به، مرقَّب فوق الزاوية ليبدو وكأنه يحفر شكلاً مقعراً. لحواف التذاكر المثقبة، يؤدي قناع تدرج شعاعي متكرر على جانب واحد المهمة. إذن فالـ 'border-radius المقلوب' هو في الواقع تقنية إخفاء وليس قيمة border-radius — مفيد معرفته عند البحث عن منشئ border-radius مقلوب.

استخدم خصائص الزوايا الفردية: `border-top-left-radius` أو `border-top-right-radius` أو `border-bottom-right-radius` أو `border-bottom-left-radius`. مثلاً، `border-bottom-right-radius: 24px` يدوّر الزاوية السفلية اليمنى فقط، تاركاً الثلاث الأخرى حادة. يمكنك دمجها بحرية: `border-top-left-radius: 16px; border-bottom-right-radius: 16px` ينشئ شكلاً مدوّراً قطرياً. في الاختصار، تضبط قيمتان أزواج الزوايا المتقابلة: `border-radius: 16px 0` يدوّر الزاويتين العلوية اليسرى والسفلية اليمنى، تاركاً العلوية اليمنى والسفلية اليسرى حادتين.

عكس اتجاه عقارب الساعة من أعلى اليسار: أعلى اليسار ← أعلى اليمين ← أسفل اليمين ← أسفل اليسار. إذن `border-radius: 16px 8px 0 8px` يمنح أعلى اليسار 16px وأعلى اليمين 8px وأسفل اليمين 0 وأسفل اليسار 8px. يطابق هذا اتجاه الاختصار القياسي في CSS المستخدم في `margin` و`padding` و`border-width`. بقيمتين، تُطبَّق الأولى على أعلى اليسار وأسفل اليمين؛ والثانية على أعلى اليمين وأسفل اليسار. بثلاث قيم، تُطبَّق الثانية على كل من أعلى اليمين وأسفل اليسار. قيمة واحدة تُطبَّق بالتساوي على الزوايا الأربع.

نعم — طبّق `border-radius` مباشرة على عنصر `<img>`: `img { border-radius: 50%; width: 100px; height: 100px; }` للحصول على صورة رمزية دائرية. بدلاً من ذلك، التف الصورة في `<div>` مع `overflow: hidden` وطبّق border-radius على الغلاف، مما يمنحك تحكماً أكبر في التخطيط. استخدم ميزة رفع الصور في هذه الأداة لمعاينة مظهر نصف قطرك على صورتك الفعلية قبل نسخ CSS. هذا مفيد بشكل خاص لقصص الصور الرمزية والصور المصغرة لبطاقات الوسائط وتخطيطات المعرض حيث يؤثر شكل القطع الدقيق على التصميم.

اضبط ثلاث زوايا على قيمة كبيرة واترك واحدة عند الصفر: `border-radius: 50% 50% 50% 0`. مع `transform: rotate(-45deg)`، ينتج هذا شكل دبوس الخريطة الكلاسيكي. اضبط أي زاوية تتركها عند الصفر لتوجيه القطرة في اتجاهات مختلفة: `0 50% 50% 50%` تشير للأعلى، `50% 0 50% 50%` تشير لليمين. الزاوية عند الصفر تنشئ الطرف المدبّب؛ الزوايا الثلاث ذات نصف القطر الكبير تشكّل الجسم المستدير. مفيد لعلامات الموقع والمؤشرات والزخارف في واجهة المستخدم على النمط التوضيحي.

تفصل الشرطة المائلة بين الأنصاف القطرية الأفقية والرأسية لكل زاوية. الصيغة هي: `border-radius: [الأنصاف القطرية الأفقية] / [الأنصاف القطرية الرأسية]`. مثلاً، `border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%` ينشئ شكلاً بيضوياً حيث لكل زاوية منحنى إهليلجي غير متماثل. يستخدم مولد Blob العشوائي في هذه الأداة هذه الصيغة لإنتاج أشكال عضوية غير متماثلة — شائعة لخلفيات قسم البطل والزخارف العضوية وعناصر التصميم على النمط التوضيحي. يمكن لكل زاوية أن تمتلك نسبة نصف قطر أفقي إلى رأسي مختلفة.

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

لا — يتم تحميل الصورة حصرياً باستخدام واجهة File API في المتصفح ولا تغادر جهازك أبداً. يعرض عنصر المعاينة الصورة محلياً باستخدام استدعاء `createObjectURL()` يبقى بالكامل في ذاكرة المتصفح. لا رفع، ولا معالجة على الخادم، ولا تخزين سحابي. تنطبق نفس البنية من جانب العميل على جميع الميزات الأخرى: إدخالات أشرطة التمرير وتوليد CSS وعشوائية blob ونسخ الحافظة — كلها تعمل في JavaScript دون أي طلب شبكة بعد تحميل الصفحة الأولي. تبقى صورك وأعمال تصميمك خاصة تماماً.

يمكن تحريك `border-radius` بالكامل عبر انتقالات CSS وإيماءات الإطارات الرئيسية. استخدم `transition: border-radius 0.3s ease` للتداخل السلس بين قيمتين عند التمرير. استخدم `@keyframes` للتحوّل المستمر بين الأشكال — التحريك من `0` إلى `50%` يجعل مربعاً ينبض ليصبح دائرة. التحوّل بين شكلين blob (قيم شرطة مائلة ثمانية مختلفة) ينشئ رسوماً متحركة عضوية متدفقة شائعة في خلفيات البطل. لاحظ أن تحريك border-radius يُشغّل إعادة رسم في كل إطار، لذا استخدم `will-change: border-radius` على العناصر التي تتحرك بشكل متكرر.

`border-radius` بصري بحت — يقص المظهر المرسوم للعنصر لكنه لا يغير صندوق تخطيطه أو منطقة الهامش أو منطقة إصابة مؤشر الحدث. الزوايا المربعة غير المرئية لا تزال قابلة للنقر وتحتل مساحة التخطيط. هذا مهم معرفته لواجهات اللمس: زر دائري لا يزال له منطقة نقر مربعة في زواياه. إذا كنت تحتاج منطقة الإصابة لتتبع الشكل المستدير بدقة، استخدم `clip-path: circle()` بدلاً من ذلك، والذي يقص أيضاً أحداث المؤشر. يتبع `box-shadow` الـ `border-radius` بشكل صحيح؛ لكن `outline` لا يفعل ذلك في معظم المتصفحات — استخدم `box-shadow: 0 0 0 3px color` كبديل لحلقة تركيز مستديرة.

نعم — الأداة متجاوبة بالكامل وتعمل في أي متصفح جوال حديث. على iPhone، استخدمها في Safari أو Chrome دون تثبيت أي شيء. على Android، Chrome وFirefox وEdge كلها تعمل. أشرطة التمرير مناسبة للمس مع مقابض سحب ذات حجم مناسب. يستخدم رفع الصور منتقي الملفات الأصلي على الجوال، مما يتيح لك الاختيار من ألبوم الكاميرا أو تطبيق الملفات. نسخ CSS إلى الحافظة يعمل عبر واجهة Web Clipboard API القياسية المدعومة على جميع متصفحات الجوال الحديثة. الأداة بأكملها تعمل من جانب العميل، لذا لا يوجد تنزيل تطبيق، ولا حساب، ولا بيانات تُرسل في أي مكان.