خصائص النمط الحدود للCSS

التعريف والاستخدام

يستخدم خصائص border-style لتحديد نمط جميع الحواف للعنصر، أو لتحديد نمط الحد بشكل فردي لكل حافة.

فقط عندما يكون هذا القيمة ليست none، يمكن أن يظهر الحد

مثال 1

border-style:dotted solid double dashed;
  • الجانب الأعلى هو نقاط
  • الجانب الأيمن هو خط صلب
  • الجانب السفلي هو خطين
  • الجانب الأيسر هو خطين متقطعين

مثال 2

border-style:dotted solid double;
  • الجانب الأعلى هو نقاط
  • الجانب الأيمن والجانب الأيسر هما خطوط صلبة
  • الجانب السفلي هو خطين

مثال 3

border-style:dotted solid;
  • الجانب الأعلى والجانب السفلي هما نقاط
  • الجانب الأيمن والجانب الأيسر هما خطوط صلبة

مثال 4

border-style:dotted;
  • جميع الـ 4 حواف هي نقاط

يرجى الرجوع أيضًا إلى:

تعليم CSS:حافات CSS

دليل HTML DOM:خاصية borderStyle

مثال

تعيين أنواع الحواف لأربعة جوانب:

p
  {
  border-style:solid;
  }

جرب بنفسك

جافا سكريبت الجملة

border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

قيمة الخاصية

القيم الوصف
none يحدد حافة بدون حواف.
hidden مثل "none"، باستثناء التطبيق على الجداول، حيث يستخدم "hidden" لحل نزاعات الحواف.
dotted يحدد حافة نقاط. يظهر في معظم المتصفحات كخط صلب.
dashed يحدد خطاً مكسوراً. يظهر في معظم المتصفحات كخط صلب.
solid يحدد خطاً صلباً.
double يحدد خطين. عرض الخطين يساوي قيمة border-width.
groove يحدد حواف grooved ثلاثية الأبعاد. تأثيرها يعتمد على قيمة border-color.
ridge يحدد حواف ridged ثلاثية الأبعاد. تأثيرها يعتمد على قيمة border-color.
inset يحدد حواف inset ثلاثية الأبعاد. تأثيرها يعتمد على قيمة border-color.
outset يحدد حواف outset ثلاثية الأبعاد. تأثيرها يعتمد على قيمة border-color.
inherit يحدد أن يتم تنسيخ أنواع الحواف من العنصر الأم.

الوصف

أقل أنواع الحواف تنبؤية هي double. إنها تعرف بأن عرض الخطين بالإضافة إلى المسافة بينهما يساوي قيمة border-width. ومع ذلك، لم يذكر معيار CSS ما إذا كان خطاً واحداً أعرض من الخط الآخر أو ما إذا كان يجب أن يكون عرضهما متساويين، ولا ما إذا كان المسافة بينهما يجب أن تكون أكثر من عرض الخط. كل ذلك يقرره وكيل المستخدم، وليس للفنان تأثير على هذا القرار.

تفاصيل التقنية

القيمة الافتراضية: لم يتم تحديده
التنسيخ: لا
الإصدار: CSS1
جافا سكريبت الجملة: object.style.borderStyle="dotted double"

مزيد من الأمثلة

تعيين أنواع الحواف لأربعة جوانب
هذا المثال يوضح كيفية تعيين أنواع الحواف لأربعة جوانب.
تعيين حواف مختلفة لكل جانب
هذا المثال يوضح كيفية تعيين أنواع الحواف المختلفة للأطراف المختلفة للعنصر.

دعم المتصفح

الرقم في الجدول يوضح الإصدار الأولي من المتصفح الذي يدعم هذه الخاصية بالكامل.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5