رنگ مرز در CSS

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

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

• نام رنگ – مانند "red" برای قرمز

• مقدار HEX – مانند "#ff0000"

• مقدار RGB – مانند "rgb(255, 0, 0)"

• مقدار HSL – مانند "hsl(0, 100%, 50%)"

• transparent – برای مرز شفاف

🔸 نکته: اگر ویژگی border-color تنظیم نشده باشد، رنگ مرز به‌صورت پیش‌فرض از رنگ متن عنصر (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، می‌توانید به فصل‌های مربوط به رنگ‌ها در آموزش CSS مراجعه کنید.