خط مرزی در CSS – ویژگی border

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

این ویژگی، یک ویژگی خلاصه برای سه ویژگی border-width, border-style و border-color است که هرکدام از آن‌ها برای تعیین یکی از مشخصه‌های پهنا، استایل و رنگ خطوط مرزی به کار می‌روند. در واقع برای تعیین همزمان جزئیات مربوط به خطوط مرزی می‌توانید از ویژگی border کمک بگیرید.

نحوه تعیین خط مرزی با کمک ویژگی border در CSS

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

h2 {
  border: 3px solid red;
}

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

مثال زیر نیز نمونه دیگری از تعیین بردر با کمک ویژگی border را نمایش می‌دهد:

h2 {
  border: dashed #ebd93d;
}

مقدار این ویژگی باعث می‌شود چهار خط مرزی پیرامون المان‌های <h2> با پهنای پیشفرض، به صورت خط چین و با رنگی دارای کد هگز #ebd93d رسم شود. تصویر زیر نتیجه اعمال این قانون را نمایش می‌دهد:

جزئیات مقدار ویژگی border

شما می‌توانید برای ویژگی border مقداری شامل موارد زیر درج کنید:

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

چند نکته تکمیلی

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

h2 {
  border-style: dashed solid double dotted;
}

تصویر زیر نتیجه اعمال قانون فوق را نمایش می‌دهد:

علاوه بر این می‌توانید از ویژگی‌های خلاصه border-top, border-right, border-bottom و border-left به منظور تعیین همزمان جزئیات خط مرزی برای یک لبه استفاده کنید. برای نمونه در مثال زیر پهنا، استایل و رنگ خط مرزی صرفا برای لبه پایینی با کمک ویژگی border-bottom مشخص شده است (شما می‌توانید به صورت مشابه پهنا، استایل و رنگ خط مرزی سایر لبه‌ها را با کمک ویژگی‌های مناسب فوق مشخص کنید):

h2 {
  border-bottom: 3px solid red;
}

تصویر زیر نتیجه اعمال این قانون را نمایش می‌دهد:

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