خاصية نمط الحدود
آخر تحديث: 2026-09-13
border-style خاصية نمط الحدود
تحدد الخاصية border-style مظهر خط الحد، مثل solid أو dashed أو dotted. وهي مفتاح ظهور الحد من الأساس — فحتى مع تعيين border-width وborder-color، يبقى الحد غير مرئي عندما يكون border-style هو none. يوفر CSS 10 أنماط خط مختلفة للاختيار من بينها.
| الفئة | |
|---|---|
| القيمة الأولية | none |
| موروث | لا |
| ينطبق على | all |
| نوع الحركة | discrete |
| إصدار CSS | CSS1 |
| الحالة | قياسي |
📝 التركيب
border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset{1,4};⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | كلمة مفتاحية | أنماط خط الحدود العشرة |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| border-style | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： solid هو النمط الأكثر استخداماً؛ ويُستخدم dashed وdotted غالباً لعلامات مؤقتة أو حالات مسودة.
تحذير： كل من none وhidden لا يرسمان حداً، لكن hidden تكبُت الحدود المجاورة أيضاً في جدول بـ border-collapse: collapse، لذا يختلف سلوكهما.
❓ الأسئلة الشائعة
Qلماذا تبدو groove وridge وinset وoutset مسطحة؟
Aتعتمد هذه الأنماط الثلاثية الأبعاد الأربعة على التباين بين الفاتح والغامق في لون الحد لإيجاد عمق، لذا يكاد يكون التأثير غير مرئي عندما يكون تباين اللون منخفضاً أو الحد رفيعاً. نادراً ما تُستخدم في واجهات مسطحة حديثة؛ ويفضَّل دمج solid مع box-shadow للحصول على مظهر متدرّج خفيف.
Qما الفرق بين border-style: none وhidden؟
Aكلاهما لا يرسم حداً. يكمن الفرق في الجداول: مع border-collapse: collapse، يكبُت hidden الحدود المجاورة بالقوة (بأعلى أولوية)، بينما none لها أولوية أقل وقد تظل حدود الخلية المجاورة ظاهرة. على العناصر العادية يتصرفان بشكل متطابق.
Qما أنماط خط الحد التي يوفرها CSS ومتى يجب استخدام كل منها؟
Aيوفر CSS 10 أنماط: none وhidden وsolid وdashed وdotted وdouble وgroove وridge وinset وoutset. solid هو الأكثر شيوعاً؛ وdashed وdotted مناسبان كفواصل؛ وdouble يضيف تأكيداً؛ والأنماط الثلاثية الأبعاد الأربعة نادراً ما تُستخدم في التصميم المسطح. اختر حسب الثقل البصري الذي تحتاجه.
Qكيف أنشئ أنماطاً مختلطة مثل حد متقطع على جانب واحد فقط؟
Aتقبل border-style من 1 إلى 4 قيم تُسنَد للحواف العلوية واليمنى والسفلية واليسرى، لذا يعطي border-style: solid dashed; حوافاً علوية/سفلية صلبة ويسرى/يمنى متقطعة. يمكنك أيضاً دمج خصائص حسب الجانب، مثل border-top-style: dashed; border-bottom-style: solid; للحصول على حافة واحدة متقطعة.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
