تعیین استایل خطوط مرزی در CSS – ویژگی border-style

ویژگی border-style در CSS برای تعیین استایل چهار خط مرزی (بُردر یا border) پیرامون المان ها (به صورت یکپارچه، دوتایی، نقطه چین، خط چین و …) استفاده می‌شود.

این ویژگی، یک ویژگی خلاصه برای چهار ویژگی border-top-style, border-right-style, border-bottom-style و border-left-style در CSS محسوب می‌شود که هرکدام از آن‌ها برای تعیین استایل خط مرزی یکی از لبه های بالا، راست، پایین و چپ المان به کار می‌روند.

نحوه تعیین استایل خطوط مرزی با کمک ویژگی border-style

برای تعیین استایل خطوط مرزی المان ها در CSS کافیست مشابه با نمونه زیر مقدار مناسبی برای این ویژگی مشخص کنید:

h1, h2, h3, h4, h5, h6 {
  border-style: dotted;
}

مقدار dotted برای این ویژگی در قانون CSS فوق باعث می‌شود چهار خط مرزی پیرامون هدینگ ها (المان های <h1> تا <h6>) به صورت نقطه چین رسم شود. تصویر زیر نتیجه اعمال این قانون روی یک هدینگ را نمایش می‌دهد:

برای این ویژگی می‌توانید یک، دو، سه یا چهار مقدار از میان مقادیر مجاز برای استایل خط مرزی مشخص کنید:

• وقتی فقط یک مقدار برای این ویژگی مشخص شود، استایل یکسانی روی هر چهار خط مرزی اعمال می‌شود.
• وقتی دو مقدار برای این ویژگی مشخص شود استایل اول روی خطوط مرزی بالا و پایین و استایل دوم روی خطوط مرزی راست و چپ اعمال می‌شود.
• وقتی سه مقدار برای این ویژگی مشخص شود استایل اول روی خط مرزی بالا، استایل دوم روی خطوط مرزی راست و چپ و استایل سوم روی خط مرزی پایین اعمال می‌شود.
• وقتی چهار مقدار برای این ویژگی مشخص شود استایل اول روی خط مرزی بالا، استایل دوم روی خط مرزی راست، استایل سوم روی خط مرزی پایین و استایل چهارم روی خط مرزی چپ اعمال می‌شود (برای به خاطر سپردن آسان‌تر، ترتیب مقادیر را به شکل ساعتگرد از لبه بالا شروع کنید).

مقادیر متداول قابل استفاده برای ویژگی border-style

شما می‌توانید از یک یا چند مقدار مجاز زیر برای تعیین استایل خطوط مرزی در ویژگی border-style استفاده کنید:

• none: این مقدار، مقدار پیشفرض برای ویژگی border-style است و باعث می‌شود هیچ خط مرزی نمایش داده نشود.
• hidden: این مقدار هم رفتاری مشابه با مقدار none دارد. البته به جز در مورد سلول های جدول و زمانی که از بهم آمیختگی خطوط مرزی (border collapsing) استفاده می‌شود. در چنین حالتی مقدار hidden بیشترین اولویت را خواهد داشت درحالیکه مقدار none کمترین اولویت را دارد. نکته: بهم آمیختگی خطوط مرزی که طی آن خطوط مرزی برخوردی سلول‌های جدول درهم می‌آمیزند (مانند خط مرزی پایینی یک سلول با خط مرزی بالایی سلول پایین آن) با کمک مقدار collapse برای ویژگی border-collapse مشخص می‌شود.
• dotted: این مقدار، باعث می‌شود خط مرزی به صورت نقطه چین رسم شود.
• dashed: این مقدار، باعث می‌شود خط مرزی به صورت خط چین رسم شود.
• solid: این مقدار، باعث می‌شود خط مرزی به صورت ساده یا یکپارچه رسم شود.
• double: این مقدار، باعث می‌شود خط مرزی به صورت دوتایی رسم شود.
• groove: این مقدار، باعث می‌شود خط مرزی به صورت سه بعدی با ظاهری شیاردار یا دارای تورفتگی رسم شود. نتیجه این استایل برعکس ridge است.
• ridge: این مقدار، باعث می‌شود خط مرزی به صورت سه بعدی با ظاهری لبه‌دار یا دارای برآمدگی رسم شود. نتیجه این استایل برعکس groove است.
• inset: این مقدار، باعث می‌شود خط مرزی به صورت سه بعدی با ظاهر جاساز یا تورفته رسم شود. نتیجه این استایل برعکس outset است.
• outset: این مقدار، باعث می‌شود خط مرزی به صورت سه بعدی با ظاهری برجسته رسم شود. نتیجه این استایل برعکس inset است.

در تصویر زیر نمایی از نتیجه مقادیر فوق را (برای خطوط مرزی چهار لبه یک المان) با پهنای خط مرزی 10 پیکسل و رنگ زمینه زرد مشاهده می‌کنید:

چند نکته در مورد مقادیر فوق

• همانطور که گفتیم مقدار پیشفرض برای ویژگی border-style برابر none است و در این حالت هیچ خط مرزی پیرامون المان نمایش داده نمی‌شود. بنابراین تعیین مقدار برای سایر ویژگی‌های مرتبط با خطوط مرزی بدون تعیین استایل خطوط، نتیجه‌ای نخواهد داشت.
• شعاع نقطه‌ها در استایل dotted برابر با نصف پهنا (یا ضخامت) تعیین شده برای خطوط مرزی (توسط ویژگی border-width و …) است.
• مجموع ضخامت دو خط و فاصله بین آن‌ها در استایل double متناسب با پهنای خطوط مرزی خواهد بود.
• به طور مشابه از مقادیر فوق می‌توانید برای تعیین استایل خط مرزی یکی از لبه ها توسط ویژگی‌های border-top-style, border-right-style, border-bottom-style و border-left-style کمک بگیرید.

چند مثال تکمیلی برای تعیین استایل خط مرزی المان در CSS

در مثال زیر از دو مقدار برای تعیین استایل خطوط border المان در CSS استفاده شده است:

h1 {
  border-style: solid dotted;
  border-width: 5px;
}

به این ترتیب خط مرزی بالا و پایین المان های <h1> به صورت یکپارچه و خط مرزی راست و چپ آن‌ها به صورت نقطه چین (با پهنای 5 پیکسل) خواهد بود:

مثال زیر هم نمونه‌ای سه مقداری برای این ویژگی را نمایش می‌دهد:

h1 {
  border-style: dashed double none;
  border-width: 10px;
}

با توجه به سه مقدار فوق برای ویژگی border-style، خط مرزی بالایی به صورت خط چین و خطوط مرزی راست و چپ به صورت دوتایی (با پهنای 10 پیکسل) رسم می‌شوند. لبه پایینی نیز فاقد خط مرزی خواهد بود:

در مثال زیر نیز چهار مقدار برای این ویژگی درج شده است:

h1 {
  border-style: dashed solid double double;
  border-width: 10px;
}

با توجه به چهار مقدار فوق برای ویژگی border-style، خط مرزی بالا به صورت خط چین، خط مرزی راست به صورت یکپارچه، خط مرزی پایین به صورت دوتایی و خط مرزی چپ نیز به صورت دوتایی (با پهنای 10 پیکسل) رسم می‌شوند:

بیشتر بخوانید: تعیین همزمان جزئیات خط مرزی در CSS – ویژگی border

بازگشت به فهرست مجموعه آموزشی CSS