ویژگی های خلاصه شده مرز درCSS

همان‌طور که در صفحات قبل مشاهده کردید، هنگام کار با مرزها در CSS، ویژگی‌های مختلفی مانند border-width، border-style و border-color وجود دارند که باید تنظیم شوند.

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

ویژگی border در واقع ترکیبی از سه ویژگی زیر است:

• border-width – ضخامت مرز
• border-style – سبک مرز (الزامی)
• border-color – رنگ مرز

مثال: استفاده از ویژگی خلاصه‌شده برای همه طرف‌ها

p {
  border: 5px solid red;
}

 نتیجه: یک عنصر با مرزی قرمز، صاف و به ضخامت ۵ پیکسل در همه طرف‌ها

تعریف ویژگی‌های مرز برای یک طرف خاص

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

مرز سمت چپ (Left Border)

p {
  border-left: 6px solid red;
}

 نتیجه: مرز قرمز، صاف و به ضخامت ۶ پیکسل فقط در سمت چپ عنصر

مرز پایین (Bottom Border)

p {
  border-bottom: 6px solid red;
}

نتیجه: مرز قرمز، صاف و به ضخامت ۶ پیکسل فقط در پایین عنصر

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