ویژگی border-style CSS

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

پroperty 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 تعیین حاشیه‌های groove سه‌بعدی. اثر این حاشیه‌ها بستگی به مقدار border-color دارد.
ridge تعیین حاشیه‌های bevel سه‌بعدی. اثر این حاشیه‌ها بستگی به مقدار border-color دارد.
inset تعیین حاشیه‌های inset سه‌بعدی. اثر این حاشیه‌ها بستگی به مقدار border-color دارد.
outset تعیین حاشیه‌های outset سه‌بعدی. اثر این حاشیه‌ها بستگی به مقدار border-color دارد.
inherit تعیین می‌کند که سبک حاشیه باید از عنصر والد ارث‌بخشد.

توضیح

سبک حاشیه‌ای که بیشترین پیش‌بینی‌ناپذیری را دارد، double است. این به معنای دو خط به عرض border-width و فضای بین این دو خط است. با این حال، استاندارد CSS هیچ گونه توضیحی در مورد اینکه آیا یکی از خطوط از دیگری ضخیم‌تر است یا خیر یا اینکه آیا دو خط باید به یک عرض باشند یا خیر، ارائه نمی‌دهد. همچنین هیچ اشاره‌ای به اینکه فضای بین خطوط باید از عرض خط‌ها بزرگ‌تر باشد یا خیر، وجود ندارد. تمام این‌ها توسط کارگزار کاربر (user agent) تصمیم‌گیری می‌شود و سازنده هیچ تأثیری در این تصمیم ندارد.

جزئیات فنی

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

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

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

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

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

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