ويژگی 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 با یک مقدار در CSS

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

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

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

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

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

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

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

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

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

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

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

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

خلاصه درس

در این درس با ویژگی border-color در CSS:

  • انواع مقداردهی
  • خلاصه نویسی آن با مقدار های مختلف

آشنا شدیم.

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