انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 33
دورة لغة CSS

تحديد نوع الإطار في لغة CSSCSS Border style

سوف تتعلم في هذا الدرس التحكم في شكل أو نوع borders الإطار بإستخدام خاصية border-style في لغة CSS.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
11
الأمثلة
12
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
4,185
محتوى الدرس
في هذا الدرس 11تصفّح المواضيع

CSS Border style تحديد نوع الإطار في لغة CSS

خاصية border-style في لغة CSS تُستخدم لتُحدد شكل أو نوع border الإطار من الاربع جوانب [left-right-top-bottom] وهي الوحيدة المطلوبة لعمل إطار دون أي خاصية أخري ويظهر الإطار بشكلة الأفتراضي ولونة الأفتراضي وحدمة الأفتراضي.


قيم خاصية border-style في لغة CSS:

  • dotted لعمل border مُنقط.
  • dashed لعمل border مكون من علامه ال dash -.
  • solid لعمل border بخط رفيع.
  • double لعمل border مزدوج.
  • groove لعمل border 3D.
  • ridge لعمل border 3D.
  • inset لعمل border 3D. 
  • outset لعمل border 3D. 
  • none  لإلغاء ال border.
  • hidden لعمل border مخفي.

border-style syntax

طريقة كتابة خاصية border-style في لغة CSS.

HTML 
border-style:value;

border-style values

قيم خاصية border-style في لغة CSS.

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

CSS border style with none خاصية border-style مع القيمة none في لغة CSS

تُستخدم خاصية border-style مع القيمة none وهي القيمة الأفتراضية وهي أن يكون العنصر بدون إطار خارجي.

CSS border style with none

خاصية border-style والقيمة none في لغة CSS.

HTML 
p
{
 border-style:none;
}
جرّب بنفسك

CSS border style with solid خاصية border-style مع القيمة solid في لغة CSS

تُستخدم خاصية border-style مع القيمة solid لعمل إطار خارجي للعنصر ويكون خط مستقيم متشابك صلب.

CSS border style with solid

خاصية border-style والقيمة solid في لغة CSS.

HTML 
p
{
 border-style:solid;
}
جرّب بنفسك

CSS border style with dotted خاصية border-style مع القيمة dotted في لغة CSS

تُستخدم خاصية border-style مع القيمة dotted لعمل إطار خارجي للعنصر ويتكون من علامة أو رمز dot نقة [.....].

CSS border style with dotted

خاصية border-style والقيمة dotted في لغة CSS.

HTML 
p
{
 border-style:dotted;
}
جرّب بنفسك

CSS border style with dashed خاصية border-style مع القيمة dashed في لغة CSS

تُستخدم خاصية border-style مع القيمة dashed لعمل إطار خارجي للعنصر ويتكون من علامة أو رمز dash علامة minus سالب [-].

CSS border style with dashed

خاصية border-style والقيمة dashed في لغة CSS.

HTML 
p
{
 border-style:dashed;
}
جرّب بنفسك

CSS border style with double خاصية border-style مع القيمة double في لغة CSS

تُستخدم خاصية border-style مع القيمة double لعمل إطار خارجي للعنصر ويكون إطار مزدوج مٌكرر.

CSS border style with double

خاصية border-style والقيمة double في لغة CSS.

HTML 
p
{
 border-style:double;
}
جرّب بنفسك

CSS border style with groove خاصية border-style مع القيمة groove في لغة CSS

تُستخدم خاصية border-style مع القيمة groove لعمل إطار خارجي للعنصر ويكون إطار ثلاثي الأبعاد 3d.

CSS border style with groove

خاصية border-style والقيمة groove في لغة CSS.

HTML 
p
{
 border-style:groove;
}
جرّب بنفسك

CSS border style with ridge خاصية border-style مع القيمة ridge في لغة CSS

تُستخدم خاصية border-style مع القيمة ridge لعمل إطار خارجي للعنصر ويكون إطار ثلاثي الأبعاد 3d.

CSS border style with ridge

خاصية border-style والقيمة ridge في لغة CSS.

HTML 
p
{
 border-style:ridge;
}
جرّب بنفسك

CSS border style with inset خاصية border-style مع القيمة inset في لغة CSS

تُستخدم خاصية border-style مع القيمة inset لعمل إطار خارجي للعنصر ويكون إطار ثلاثي الأبعاد 3d داخلي.

CSS border style with inset

خاصية border-style والقيمة inset في لغة CSS.

HTML 
p
{
 border-style:inset;
}
جرّب بنفسك

CSS border style with outset خاصية border-style مع القيمة outset في لغة CSS

تُستخدم خاصية border-style مع القيمة outset لعمل إطار خارجي للعنصر ويكون إطار ثلاثي الأبعاد 3d بارز للخارج.

CSS border style with outset

خاصية border-style والقيمة outset في لغة CSS.

HTML 
p
{
 border-style:outset;
}
جرّب بنفسك

CSS border style with hidden خاصية border-style مع القيمة hidden في لغة CSS

تُستخدم خاصية border-style مع القيمة hiddenلعمل إطار خارجي خفي يشبه القيمة none.

CSS border style with hidden

خاصية border-style والقيمة hidden في لغة CSS.

HTML 
p
{
 border-style:hidden;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…