خاصية Border Image
آخر تحديث: 2026-09-13
border-image خاصية Border Image
تتيح border-image استخدام صورة لرسم حد العنصر بدل خط متصل أو متقطع. تُقطّع الصورة إلى شبكة من تسعة أجزاء (أربع زوايا وأربع حواف ومنطقة مركزية) ويُخطَّط كل جزء إلى منطقة الحد المقابلة. وهي أداة قوية للحدود الزخرفية المعقدة.
| الفئة | |
|---|---|
| القيمة الأولية | none |
| موروث | لا |
| ينطبق على | all |
| نوع الحركة | discrete |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
border-image: <border-image-source> || <border-image-slice> || <border-image-width> || <border-image-outset> || <border-image-repeat>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
<border-image-source> || <border-image-slice> || <border-image-width> || <border-image-outset> || <border-image-repeat> | القيمة | اختصار صورة الحد |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| border-image | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تحذير： عند استخدام border-image، يجب أيضًا التصريح بـ border أو border-width، وإلا لن تظهر حدود الصورة.
تلميح： قيمة border-image-slice هي المسافة المقطوعة للداخل من حواف الصورة؛ وتجعل الكلمة المفتاحية round صورة الحد متجاورة ومُحجمة لتناسب طول الجانب.
❓ الأسئلة الشائعة
Qما مدى دعم المتصفحات لـ border-image؟
Aتدعمه جميع المتصفحات الحديثة (Chrome و Firefox و Edge و Safari)، لكن IE11 والإصدارات الأقدم لها دعم محدود أو معدوم. صرّح دائمًا بـ border: solid مع border-width كبديل احتياطي حتى تُ renderiza المتصفحات التي لا تدعم border-image حدًا عاديًا؛ وإلا قد ينتهي العنصر بدون أي حد.
Qلماذا لا يظهر حدّي بعد استخدام border-image؟
Aالأسباب الشائعة: عدم ضبط border-width — لا توفر border-image العرض بمفردها، لذا تحتاج إلى border أولًا لإنشاء منطقة الحد؛ أو مسار صورة خاطئ؛ أو قيمة slice أكبر من الصورة الفعلية. النمط الموثوق هو border: 20px solid transparent; يليها border-image.
Qماذا تعني slice و repeat و outset في border-image؟
Aslice هي المسافة المقطوعة للداخل من كل حافة لتكوين الشبكة المكونة من تسعة أجزاء (بدون وحدة، تُعامل كبيكسلات أو نسب مئوية). يحدد repeat كيفية ملء الحواف: stretch (تمدد) و round (تتجاور وتُحجّم لتناسب) و repeat (تتجاور وقد تُقص). و outset يمدد صورة الحد للخارج. ترتيب الاختصار هو: url(صورة) slice / width / outset repeat.
Qهل يمكن استخدام border-image مع border-radius معًا؟
Aليس حقًا. لا تُقص border-image بواسطة border-radius، لذا تُظهر المنطقة الدائرية زوايا صورة بارزة أو حوافًا خشنة، وتبدو التركيبة سيئة. للحصول على تأثير 'زوايا دائرية مع حد صورة'، حاكِه عبر background-image و padding، أو استخدم تقنيات mask.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
