آموزش ویژگی border-color در CSS

از ویژگی border-color برای تنظیم رنگِ چهار سمتِ کادرها(border) استفاده می شود.

رنگ مورد نظر می تواند با استفاده از مقادیر زیر مشخص شود:

1. نام رنگ: مشخص کردن یک رنگ با استفاده از نام رنگ، مانند red
2. HEX: مشخص کردن رنگ با استفاده از یک مقدار HEX، مانند "#ff0000"
3. RGB: مشخص کردن رنگ با استفاده از یک مقدار RGB مانند "rgb(255,0,0)"
4. HSL: مشخص کردن رنگ با استفاده از یک مقدار HSL، مانند "hsl(0, 100%, 50%)"
5. 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

رنگ کادر(border) را نیز می توانیم با استفاده از یک مقدار هگزادسیمال(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%); /* قرمز */
}