CSS border-style کا حصہ

تعریف و استفاده

ویژگی 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

مثال

تنظیم مدل‌های حاشیه برای 4 حاشیه:

p
  {
  border-style:solid;
  }

آزمایش کنید

قوانین CSS

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 و فضای بین آن‌ها معادل border-width است. اما، استاندارد CSS این را نمی‌گوید که آیا یکی از خطوط باید ضخیم‌تر از دیگری باشد یا دو خط باید به یک اندازه باشند یا آیا فضای بین خطوط باید بیشتر از عرض خط باشد. همه این‌ها توسط کارگزار کاربر تصمیم می‌گیرد و سازنده هیچ تأثیری بر این تصمیم ندارد.

جزئیات فنی

مقدار پیش‌فرض: not specified
وراثت: no
نسخه: CSS1
قوانین جاوااسکریپت: object.style.borderStyle="dotted double"

مثال‌های بیشتر

تنظیم مدل‌های حاشیه برای چهار حاشیه
این مثال نشان می‌دهد که چگونه می‌توانید برای چهار حاشیه، مدل‌های حاشیه را تنظیم کنید.
تنظیم برچسب‌های حاشیه برای هر یک از اطراف
این مثال نشان می‌دهد که چگونه می‌توانید برای اطراف یک عنصر، برچسب‌های مختلف حاشیه را تنظیم کنید.

پشتیبانی مرورگر

اعداد شماری در جدول نشان‌دهنده نسخه اولین مرورگر هستند که این ویژگی را کاملاً پشتیبانی می‌کند.

چروم IE / ایج فائرفاکس سافری اوپرا
1.0 4.0 1.0 1.0 3.5