تعیین رنگ خط مرزی در CSS – ویژگی border-color

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

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

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

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

h2 {
  border-style: solid;
  border-color: red;
}

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

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

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

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

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

h2 {
  border-style: solid;
  border-color: red green;
}

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

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

h2 {
  border-style: solid;
  border-color: red #ebd93d green;
}

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

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

h2 {
  border-style: solid dotted;
  border-color: red #ebd93d rgb(200, 75, 75) green;
}

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

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

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

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