ویژگی border-color CSS

تعریف و استفاده

ویژگی border-color رنگ‌های چهار لبه را تنظیم می‌کند. این ویژگی می‌تواند 1 تا 4 رنگ را تنظیم کند.

ویژگی border-color یک ویژگی کوتاه است که می‌توانید رنگ بخش‌های قابل مشاهده همه‌ی لبه‌های یک عنصر را تنظیم کنید، یا برای هر 4 لبه رنگ‌های متفاوتی تعیین کنید. به مثال زیر نگاه کنید:

مثال 1

border-color:red green blue pink;
  • لبه بالا قرمز است
  • کادر سمت راست سبز است
  • لبه پایین آبی است
  • لبه چپ صورتی است

مثال 2

border-color:red green blue;
  • لبه بالا قرمز است
  • لبه سمت راست و چپ سبز هستند
  • لبه پایین آبی است

مثال 3

border-color:dotted red green;
  • لبه بالا و پایین قرمز هستند
  • لبه سمت راست و چپ سبز هستند

مثال 4

border-color:red;
  • همه 4 لبه‌ها قرمز هستند

به یاد داشته باشید که سبک لبه نمی‌تواند none یا hidden باشد، در غیر این صورت لبه نمایش داده نمی‌شود.

نکته:همیشه ویژگی border-style را قبل از border-color اعلام کنید. عنصر باید قبل از تغییر رنگ لبه، لبه را داشته باشد.

لطفاً به:

آموزش CSS:کناره‌های CSS

دستورالعمل HTML DOM:ویژگی borderColor

مثال

تنظیم رنگ 4 تا لبه:

p
  {
  border-style:solid;
  border-color:#ff0000 #0000ff;
  }

آزمایش کنید

زبان CSS

border-color: color|transparent|initial|inherit;

مقدار ویژگی

مقدار توضیح
color_name تعیین می‌کند که رنگ لبه به صورت نام رنگ است (مثلاً red).
hex_number تعیین می‌کند که رنگ لبه به صورت عدد شانسی است (مثلاً #ff0000).
rgb_number تعیین می‌کند که رنگ لبه به صورت کد rgb است (مثلاً rgb(255,0,0)).
transparent مقدار پیش‌فرض. رنگ لبه شفاف است.
inherit تعیین می‌کند که باید رنگ لبه از عنصر والد به ارث برسد.

جزئیات فنی

مقدار پیش‌فرض: not specified
继承性: no
نسخه: CSS1
زبان برنامه‌نویسی JavaScript: object.style.borderColor="#FF0000 blue"

مثال‌های بیشتر

تنظیم رنگ چهار تا لبه
این مثال نشان می‌دهد که چگونه می‌توان رنگ چهار تا لبه را تنظیم کرد. می‌توان یک تا چهار رنگ را تنظیم کرد.

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولین مرورگری هستند که از این ویژگی کامل پشتیبانی می‌کند.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5

نکته:مرورگر اینترنت اکسپلورر 6 (و نسخه‌های قدیمی‌تر) از مقدار "transparent" برای ویژگی پشتیبانی نمی‌کند.

نکته:مرورگرهای IE7 و نسخه‌های قدیمی‌تر از آن از مقدار "inherit" پشتیبانی نمی‌کنند. IE8 نیاز به !DOCTYPE دارد. IE9 از "inherit" پشتیبانی می‌کند.