مولّد CSS Border Radius
ولّد border-radius في CSS بزوايا مستقلة ونصفي قطر X/Y إهليلجيين ووحدات px أو % وإعدادات blob مسبقة. يخرج أقصر صيغة مختصرة صالحة.
إعدادات جاهزة
الزوايا
إعدادات المعاينة
معاينة
border-radius: 16px;
أدوات ذات صلة
عرض الكلما هو مولّد نصف قطر الحدود؟
اضبط نصف قطر كل زاوية على حدة، ويمكن اختيارياً بنصفي قطر أفقي ورأسي مختلفين لزوايا إهليلجية، بوحدة px أو %. تعاين الأداة الشكل وتكتب أقصر صيغة مكافئة من border-radius.
كيفية استخدام مولّد نصف قطر الحدود
- اختر إعداداً مسبقاً (Rounded أو Pill أو Circle أو Blob أو Leaf أو Ticket) أو اضبط القيم بنفسك.
- اختر الوحدة (px أو %) وفعّل الزوايا الإهليلجية إن أردت نصفي قطر X/Y منفصلين.
- اضبط كل زاوية (العليا اليسرى والعليا اليمنى والسفلى اليمنى والسفلى اليسرى)؛ وفعّل ربط كل الزوايا لتغييرها معاً.
- غيّر العرض والارتفاع واللون ضمن إعدادات المعاينة لرؤية الشكل بحجمك.
- انسخ كود CSS.
مثال
Unit %, elliptical: top-left 30/30, top-right 70/30, bottom-right 70/70, bottom-left 30/70
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
متى تستخدم مولّد نصف قطر الحدود
استخدمه للبطاقات المستديرة والأقراص والصور الرمزية والأشكال العضوية blob المصنوعة بـ CSS فقط. تتدرج النسب المئوية مع العنصر (50% على مربع يعطي دائرة). وللمضلعات العشوائية أو الأشكال ذات القطع المستقيمة استخدم مولّد Clip Path؛ وللأشكال العضوية المعقدة ذات النقاط الكثيرة استخدم مولّد SVG Blob.
كيف يعمل مولّد نصف قطر الحدود
تُرتَّب الزوايا: العليا اليسرى فالعليا اليمنى فالسفلى اليمنى فالسفلى اليسرى، كما يتطلب CSS. تُختصر كل مجموعة من أربع قيم بقواعد الاختصار القياسية: تُحذف القيمة الرابعة إذا ساوت الثانية، والثالثة إذا ساوت الأولى، والثانية إذا ساوت الأولى. مع الزوايا الإهليلجية تأتي أنصاف الأقطار الرأسية بعد الشرطة المائلة (h / v)؛ ويُحذف الجزء المائل إذا ساوى كل نصف قطر رأسي نظيره الأفقي.
حالات الاستخدام الشائعة
- أزرار ووسوم بشكل قرص
- صور رمزية دائرية
- صور عضوية blob بقيم إهليلجية من 8 قيم
- بطاقات بشكل تذكرة أو ورقة
- زوايا غير متماثلة لفقاعات الكلام
الأسئلة الشائعة
ماذا تعني الشرطة المائلة في border-radius؟
القيم قبل الشرطة المائلة أنصاف أقطار أفقية والقيم بعدها أنصاف أقطار رأسية، وهما ينتجان زوايا إهليلجية.
لماذا يصنع 999px شكل قرص؟
عندما تكون أنصاف الأقطار أكبر من الصندوق تصغّرها المتصفحات كلها بالتناسب، فتعطي قيمة ضخمة دائماً نهايات مستديرة تماماً.
هل أستخدم px أم %؟
يحافظ px على المنحنى نفسه بأي حجم؛ أما % فنسبي إلى عرض العنصر (أفقياً) وارتفاعه (رأسياً)، وهو المطلوب للدوائر وأشكال blob.