ويژگی border-color در CSS

ویژگی border-color، می تواند رنگ حاشیه (borderرا مشخص کند.

نکته: برای ایجاد حاشیه حتما باید از ویژگی border-style استفاده کنید.

این ویژگی به چهار صورت می تواند مقدار دریافت کند:

  • نام رنگ مانند: white
  • مقدار HEX مانند: #fff
  • مقدار RGB مانند: rgb(255, 255, 255)
  • مقدار HSL مانند: hsl(0, 0%, 100%)

نکته: برای اطلاعات بیشتر درباره رنگ ها به آموزش رنگ ها در CSS مراجعه کنید.

border-color: green;
border-color: #00f;
border-color: rgb(0, 255, 0);
border-color: hsl(55, 100%, 50%);

جهت های border-color در CSS

border-color: red;

ویژگی border-color در نمونه کد بالا، خلاصه چهار ویژگی است.

border-top-color: red;
border-right-color: red;
border-bottom-color: red;
border-left-color: red;

خلاصه نویسی border-color با یک مقدار

ویژگی border-color را به چند صورت می توان خلاصه نویسی کرد.

ویژگی border-color با یک مقدار:

border-color: red;
  • در چهار جهت به صورت یکسان اعمال می شود.

خلاصه نویسی border-color با دو مقدار

ویژگی border-color با دو مقدار:

border-color: y x;
  • مقدار اول در جهت بالا و پایین (محور y)
  • مقدار دوم در جهت راست و چپ (محور x)
border-color: red blue;

خلاصه نویسی border-color با سه مقدار

ویژگی border-color با سه مقدار:

border-color: top x bottom;
  • مقدار اول در جهت بالا
  • مقدار دوم در جهت راست و چپ (محور x)
  • مقدار سوم در جهت پایین
border-color: red blue purple;

خلاصه نویسی border-color با چهار مقدار

ویژگی border-color با چهار مقدار:

border-color: top right bottom left;
  • مقدار اول در جهت بالا
  • مقدار دوم در جهت راست
  • مقدار سوم در جهت پایین
  • مقدار چهارم در جهت چپ
border-color: red blue purple green;

خلاصه درس

در این درس با:

  • ویژگی border-color
  • انواع مقداردهی
  • و خلاصه نویسی آن

آشنا شدیم.

توسعه دهندگان
احسان اسلامی