مولّد حدود CSS المخصصة

اضبط السماكة والنمط واللون واستدارة حد CSS — بشكل موحد أو لكل جانب — مع معاينة مباشرة، ثم انسخ الكود الجاهز. معالجة محلية 100% — لا يُرسل أي شيء إلى خادم.

مثال:
كود CSS

كيف يعمل

يجمع حد CSS بين ثلاث معلومات: سماكة ونمط خط ولون، ويمكن تقويسه باستخدام border-radius. تتيح لك هذه الأداة ضبط هذه القيم بشكل موحد على الجوانب الأربعة أو بشكل مستقل لكل جانب، مع عرض بصري فوري للتحقق من التأثير قبل نسخ الكود.

ما الفرق بين "groove" و"ridge" و"inset" و"outset"؟

تحاكي هذه الأنماط الأربعة تأثيرًا بارزًا ثلاثي الأبعاد بناءً على اللون المختار: "groove" يعطي انطباعًا بأخدود محفور، و"ridge" بحافة بارزة، و"inset" بإطار غائر، و"outset" بإطار ناتئ؛ ويعتمد المظهر الدقيق على المتصفح ولون الخلفية المستخدم.

لماذا فصل السماكات حسب الجانب بدلاً من استخدام اختصار "border"؟

لا يسمح الاختصار border بتحديد سماكة مختلفة لكل جانب؛ للحصول على تأثير غير متماثل (حد سميك في الأعلى ورفيع على الجوانب)، يجب استخدام الخصائص المفصلة border-top-width وborder-right-width وما إلى ذلك، كما تفعل هذه الأداة عند إيقاف خيار "السماكة الموحدة".

لا تُنقل أي بيانات إلى خادم: يتم توليد المعاينة والكود مباشرة في متصفحك.