border-color

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

این ویژگی از دسته ویژگی ها مختصر نویسی می باشد که می تواند همزمان مقادیر ویژگی های border-top-color، border-right-color، border-bottom-color و border-left-color را تعیین کند.

این ویژگی می تواند یک، دو، سه و یا چهار مقدار داشته باشد که در نحوه خواندن هر کدام بصورت زیر است:

زمانی که چهار مقدار دارد مقدار اول مربوط به حاشیه بالا، مقدار دوم مربوط به سمت راست، مقدار سوم مربوط به پایین و مقدار چهارم مربوط به سمت چپ خواهد بود.

برای اینکه بتوانید ترتیب را بهتر یاد بگیرید همیشه در جهت ساعت گرد عدد را ها بخوانید: بالا، راست، پایین و چپ.

وقتی سه مقدار وجود دارد، مقدار اول حاشیه بالا، مقدار دوم حاشیه سمت چپ و راست و مقدار سوم حاشیه پایین را نشان می دهند.

اگر دو مقدار داشته باشیم مقدار اول مربوط به حاشیه بالا و پایین، مقدار دوم مربوط به حاشیه های چپ و راست می باشد.

و اگر یک مقدار باشد آن مقدار مربوط به هر چهار طرف عنصر می باشد.

border-color: top right bottom left; /* چهار مقدار */
border-color: top right/left bottom; /* سه مقدار */
border-color: top/bottom right/left; /* دو مقدار */
border-color: top/bottom/right/left; /* یک مقدار */

.element {
  border-style: dotted;
  border-width: 1em;

  border-color: red;

  /* یا */
  border-color: red green;

  /* یا */
  border-color: red pink green;
  
  /* یا */
  border-color: red pink yellow green;
}

مقدار اولیه این ویژگی برابر با currentColor می باشد.

این ویژگی می تواند مقدارش را از حاشیه عنصر پدرش به ارث ببرد و برای این کار فقط کافی است از کلمه inherit به عنوان مقدار استفاده کنیم:

.baba {
  border-color: khaki;
}

.gol-pesare-baba {
  border-color: inherit; /* khaki*/
}

همچنین عرض و نوع حاشیه عنصر را می توان به ترتیب از طریق ویژگی های border-width و border-style تعیین کرد.

 
دموی زیر را بررسی کنید و مقادیر را تغییر دهید:
 

See the Pen border-width/style/color by Mojtaba Seyedi (@seyedi) on CodePen.