6XC

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

دوّر كل زاوية على حدة أو جميعها معًا، بوحدة px أو %، مع معاينة حية وكود CSS قابل للنسخ.

972 مشاهدة

الوحدة

خاصية border-radius

ترتيب الاختصار هو border-radius: أعلى-يسار أعلى-يمين أسفل-يمين أسفل-يسار. البكسل (px) يعطي استدارة ثابتة؛ والنسبة المئوية (%) تتغيّر مع حجم الصندوق — فـ50% على مربع تصنع دائرة كاملة. القيم غير المتساوية تُنشئ أشكال "بلوب" (blob) العضوية الشائعة في أقسام الصفحة الرئيسية الحديثة.

الأسئلة الشائعة

كيف أصنع دائرة أو شكل حبة الدواء (pill)؟

عنصر مربع بخاصية border-radius: 50% يصبح دائرة. مستطيل بقيمة استدارة ثابتة كبيرة (مثل 999px) يصبح بشكل حبة الدواء.

px أم % — أيهما أستخدم؟

استخدم px عندما يجب أن تبدو الزوايا متطابقة في كل الأحجام (البطاقات، الأزرار). واستخدم % عندما يجب أن تتغيّر الاستدارة مع حجم العنصر، كما في الدوائر والأشكال العضوية.

أدوات مشابهة

منشئ تدرجات CSS صمّم تدرجات CSS خطية ودائرية ومخروطية مع معاينة حية، وانسخ الكود مباشرة. أنشئ منشئ ظل الصندوق CSS صمّم ظل الصندوق (box-shadow) بصريًا — الإزاحات، التمويه، الانتشار، اللون، الشفافية وinset — مع معاينة حية. أنشئ منشئ ظل النص CSS صمّم ظل نص (text-shadow) بتحديد الإزاحة والتمويه واللون والشفافية — مع معاينة حية على نص تجريبي. أنشئ منشئ حدود CSS صمّم حدًا بصريًا — السماكة، النمط (solid, dashed, dotted, double…)، اللون، ونصف القطر — مع معاينة حية. أنشئ