مرز های جداگانه در CSS

همان‌طور که در مثال‌های صفحات قبل دیدید، در CSS می‌توان برای هر طرف یک عنصر، مرزی متفاوت تعریف کرد.

برای این منظور، CSS ویژگی‌هایی جداگانه برای هر طرف مرز ارائه می‌دهد:

• border-top-style – سبک مرز بالا
• border-right-style – سبک مرز راست
• border-bottom-style – سبک مرز پایین
• border-left-style – سبک مرز چپ

مثال: تعیین سبک مرز برای هر طرف به‌صورت جداگانه

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

🔹 نتیجه: هر طرف عنصر دارای سبک مرز متفاوتی خواهد بود.

استفاده از نوشتار کوتاه‌تر (Shorthand)

برای راحتی بیشتر، می‌توان از ویژگی خلاصه‌شده border-style استفاده کرد تا همان نتیجه حاصل شود.

مثال معادل:

p {
  border-style: dotted solid;
}

 نتیجه: همانند مثال قبلی، مرز بالا و پایین نقطه‌چین، و مرز چپ و راست خط صاف خواهد بود.

نحوه عملکرد ویژگی border-style با تعداد مختلف مقدار

در ادامه توضیح داده می‌شود که اگر ویژگی border-style دارای یک تا چهار مقدار باشد، چگونه اعمال می‌شود:

چهار مقدار:

border-style: dotted solid double dashed;

• بالا: نقطه‌چین (dotted)
• راست: خط صاف (solid)
• پایین: دوتایی (double)
• چپ: خط‌چین (dashed)

سه مقدار:

border-style: dotted solid double;

• بالا: نقطه‌چین
• راست و چپ: خط صاف
• پایین: دوتایی

دو مقدار:

border-style: dotted solid;

• بالا و پایین: نقطه‌چین
• راست و چپ: خط صاف

یک مقدار:

border-style: dotted;

• همه طرف‌ها: نقطه‌چین

مثال‌های کامل:

/* چهار مقدار */
p {
  border-style: dotted solid double dashed;
}

/* سه مقدار */
p {
  border-style: dotted solid double;
}

/* دو مقدار */
p {
  border-style: dotted solid;
}

/* یک مقدار */
p {
  border-style: dotted;
}

📘 استفاده از نوشتار کوتاه‌تر باعث ساده‌تر شدن کدنویسی و خوانایی بهتر CSS می‌شود، به‌ویژه زمانی که بخواهید چند ویژگی را هم‌زمان تنظیم کنید.