أداة متخصصة لإنشاء حدود مخصصة باستخدام CSS. يمكنك اختيار نمط الحدود (صلبة، متقطعة، منقطة، مزدوجة، أخدود، نتوء، داخلي، خارجي)، تحديد العرض، اختيار لون عادي أو تدرج لوني (gradient)، إضافة زوايا دائرية (border-radius)، وخط خارجي (outline) اختياري. شاهد المعاينة المباشرة وانسخ كود CSS الناتج لاستخدامه في مشاريعك.

مثالية للمصممين والمطورين لإنشاء حدود إبداعية دون الحاجة لكتابة الكود يدوياً. تدعم التدرجات اللونية في الحدود (border-image) مما يتيح تأثيرات متقدمة.

خاصية border في CSS تسمح بتحديد نمط، عرض، ولون الحدود. باستخدام border-image يمكنك تطبيق تدرجات لونية كحدود. هذه الأداة تولد الكود المناسب بناءً على اختياراتك. تدعم الأنماط: solid, dashed, dotted, double, groove, ridge, inset, outset. يمكنك أيضاً إضافة زوايا دائرية باستخدام border-radius وخط خارجي (outline) يمكن استخدامه لتأكيد التركيز. جميع العمليات تجري محلياً في متصفحك – لا يتم إرسال أي بيانات إلى الخادم. انسخ الكود الناتج وألصقه في ملف CSS الخاص بك. ملاحظة: خاصية border-image قد لا تعمل في جميع المتصفحات القديمة، لكنها مدعومة في المتصفحات الحديثة.

• اختر نمط الحدود : اختر من القائمة المنسدلة (صلبة، متقطعة، منقطة، مزدوجة، أخدود، نتوء، داخلي، خارجي).
• حدد العرض : أدخل عرض الحدود بالبكسل (0-20).
• اختر نوع اللون : لون عادي أو تدرج لوني (gradient). إذا اخترت التدرج، حدد لون البداية والنهاية وزاوية التدرج.
• نصف قطر الزوايا : أضف زوايا دائرية بقيمة بالبكسل.
• خط خارجي (outline) : اختر النمط والعرض واللون (اختياري).
• شاهد المعاينة : يتم تحديث المعاينة تلقائياً مع كل تغيير.
• انسخ الكود : اضغط زر "نسخ الكود" لنسخ كود CSS الناتج واستخدامه في مشروعك.
• نصائح : استخدم التدرجات اللونية لإضافة تأثيرات جذابة. استخدم border-radius لإنشاء حدود دائرية أو بيضاوية. الخط الخارجي مفيد لتأكيد التركيز على العناصر.