تعیین پهنا یا ضخامت خط مرزی در CSS – ویژگی border-width

در CSS از ویژگی border-width برای تعیین پهنا یا ضخامت چهار خط مرزی (بُردر یا border) پیرامون المان ها استفاده می‌شود.

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

نحوه تعیین پهنای خطوط مرزی با کمک ویژگی border-width

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

h2 {
  border-style: solid;
  border-width: 6px;
}

مقدار 6px برای ویژگی border-width در قانون CSS فوق باعث می‌شود چهار خط مرزی پیرامون المان‌های <h2> با پهنای 6 پیکسل رسم شود. با توجه به مقدار solid برای ویژگی border-style، تمام خطوط به صورت یکپارچه خواهند بود. تصویر زیر نتیجه اعمال این قانون را نمایش می‌دهد:

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

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

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

• medium: این مقدار، مقدار پیشفرض برای ویژگی border-width است و باعث می‌شود خط مرزی با پهنای متوسط رسم شود.
• thin: این مقدار باعث می‌شود خط مرزی به صورت باریک رسم شود.
• thick: این مقدار باعث می‌شود خط مرزی به صورت ضخیم رسم شود.
• طول: درج مقدار همراه با واحد طول نظیر px (پیکسل), cm (سانتی متر), pt (پوینت)، em و … برای این ویژگی، یکی از روش‌های رایج برای تعیین پهنای خط مرزی است. برای مثال مقدار 5px و 2em.

نکته: مقادیر thin, medium و thick برای ویژگی border-width میزان پهنای مشخص یکسانی در پیاده‌سازی‌های مختلف ندارند. با این حال همواره پهنای حاصل از مقدار medium بیشتر یا مساوی پهنای حاصل از مقدار thin و کمتر یا مساوی پهنای حاصل از مقدار thick است.

نکته: به طور مشابه از مقادیر فوق می‌توانید برای تعیین پهنای خط مرزی یکی از لبه ها توسط ویژگی‌های border-top-width, border-right-width, border-bottom-width و border-left-width کمک بگیرید.

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

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

h2 {
  border-style: solid;
  border-width: 5px medium;
}

به این ترتیب خطوط مرزی بالا و پایین المان‌های <h2> با پهنای 5 پیکسل و خطوط مرزی راست و چپ با پهنای متوسط خواهد بود:

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

h2 {
  border-style: solid;
  border-width: thick 7px medium;
}

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

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

h2 {
  border-style: solid double;
  border-width: thick 7px medium 0.5em;
}

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

بیشتر بخوانید: آشنایی با نحوه تعیین استایل خطوط مرزی در CSS و ویژگی border-style

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

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