CSS – رنگ حاشیه (Border Color)

CSS - رنگ حاشیه (Border Color)

ویژگی border-color برای تعیین رنگ چهار طرف حاشیه استفاده می‌شود.

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

  • نام رنگ: مانند “red”
  • HEX: مانند “#ff0000”
  • RGB: مانند “rgb(255, 0, 0)”
  • HSL: مانند “hsl(0, 100%, 50%)”
  • شفاف: transparent

نکته: اگر border-color تنظیم نشده باشد، رنگ حاشیه از رنگ عنصر ارث می‌برد.

مثال‌ها:

نمایش رنگ‌های مختلف حاشیه:

p.one {
  border-style: solid;
  border-color: red;
}

p.two {
  border-style: solid;
  border-color: green;
}

p.three {
  border-style: dotted;
  border-color: blue;
}

نتیجه:

  • حاشیه قرمز
  • حاشیه سبز
  • حاشیه آبی

رنگ‌های خاص برای هر طرف

ویژگی border-color می‌تواند یک تا چهار مقدار داشته باشد (برای حاشیه بالا، راست، پایین و چپ).

مثال:
p.one {
  border-style: solid;
  border-color: red green blue yellow; /* قرمز بالا، سبز راست، آبی پایین و زرد چپ */
}

استفاده از مقادیر HEX

رنگ حاشیه می‌تواند با استفاده از مقادیر هگزادسیمال (HEX) مشخص شود:

مثال:
p.one {
  border-style: solid;
  border-color: #ff0000; /* قرمز */
}

استفاده از مقادیر RGB

همچنین می‌توانید از مقادیر RGB استفاده کنید:

مثال:
p.one {
  border-style: solid;
  border-color: rgb(255, 0, 0); /* قرمز */
}

استفاده از مقادیر HSL

شما همچنین می‌توانید از مقادیر HSL استفاده کنید:

مثال:
p.one {
  border-style: solid;
  border-color: hsl(0, 100%, 50%); /* قرمز */
}

برای اطلاعات بیشتر در مورد مقادیر HEX، RGB و HSL، می‌توانید به فصل‌های مربوط به رنگ‌ها در CSS مراجعه کنید.

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - تاریخ‌ها (Dates)

JavaScript – تاریخ‌ها (Dates)

آبجکت‌های تاریخ (Date) در جاوااسکریپت آبجکت‌های تاریخ در جاوااسکریپت به ما امکان کار با تاریخ و زمان را می‌دهند....

بیشتر بخوانید
JavaScript - آرایه‌های ثابت (Array Const)

JavaScript – آرایه‌های ثابت (Array Const)

جاوااسکریپت: تعریف آرایه با const در سال 2015، جاوااسکریپت کلمه کلیدی مهمی به نام const را معرفی کرد. این...

بیشتر بخوانید
JavaScript - تکرار آرایه‌ها (Array Iteration)

JavaScript – تکرار آرایه‌ها (Array Iteration)

جاوا اسکریپت: تکرار بر روی آرایه‌ها جاوا اسکریپت روش‌های مختلفی برای تکرار (Iteration) بر روی آرایه‌ها ارائه می‌دهد که...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.