هل هناك مشكلة في هذه الأداة؟
عن «CSS Border Radius Generator Online»
تساعدك هذه الأداة في صياغة قيم border-radius مع معاينة بصرية. استخدم عناصر تحكم الزاوية الفردية للأشكال غير المتماثلة، اسحب النسب المئوية لأشكال البقع العضوية، أو اختر من الإعدادات المسبقة الشائعة (مدور، حبة، دائرة).
يعطي border-radius للعناصر حوافها المستديرة. وراء التقريب الموحد البسيط، تستخدم التصاميم الحديثة أنصاف أقطار بيضاوية، ومواصفات لكل زاوية، وحتى النسب المئوية غير المتماثلة لإنشاء أشكال عضوية مستخدمة في الرسوم التوضيحية والعناصر الزخرفية.
يعمل الإخراج في أي سياق CSS — الأزرار والبطاقات والصور والحاويات. يمكنك النسخ كاختصار (border-radius: ...) أو طويل لكل زاوية اعتمادًا على تفضيلك للأسلوب.
كيف تستخدم هذه الأداة
كيف أُجمّع قيمة border-radius لأربع زوايا؟
اضبط كل زاوية
«Top-left» و «Top-right» و «Bottom-right» و «Bottom-left» يقبل كلٌّ منها قيمة بكسل لنصف قطر تلك الزاوية. الترتيب مطابق لاختصار CSS: ابدأ بـ top-left مع عقارب الساعة.
اضغط «تشغيل»
الناتج حقل واحد `css`: `<tl>px <tr>px <br>px <bl>px`. ألصقه قيمة لـ `border-radius:`. إن تطابقت القيم الأربع يمكن اختصارها لرقم واحد، لكن الأداة تُخرج صيغة 4-قيم دائمًا.
حِيَل غير المتماثلة
تَنشأ أشكال UI شائعة من زوايا مختلفة: فقاعات المحادثة بقيمة صفر واحدة (مثلاً `12 12 12 0`)، تبويبات بصفرَيْن سفليَّيْن، أزرار pill بقيمة كبيرة جدًا على يمين+يسار وصفر أعلى+أسفل — أو ببساطة قيمة كبيرة موحَّدة مثل `9999`.
أنصاف الأقطار البيضاوية
يدعم CSS أيضًا أنصاف أقطار بيضاوية لكل زاوية بصيغة `tl-x/tl-y` (`12px/24px`) للقطع الناقص غير المتماثل. تُخرج هذه الأداة زوايا دائرية فقط (قيمة واحدة) — عدّل يدويًا إن أردت بيضاوية.