ویژگی Style borderColor

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

borderColor ویژگی‌ای که رنگ لبه‌های عنصر را تنظیم یا بازمی‌گرداند.

این ویژگی می‌تواند یک تا چهار مقدار را بپذیرد:

  • یک مقدار، به عنوان مثال: p {border-color: red} - همه چهار لبه‌ها قرمز هستند
  • دو مقدار، به عنوان مثال: p {border-color: red transparent} - لبه‌های بالا و پایین قرمز و لبه‌های چپ و راست شفاف است
  • سه مقدار، به عنوان مثال: p {border-color: red green blue}- لبه بالا قرمز، لبه‌های چپ و راست سبز و لبه پایین آبی است
  • چهار مقدار، به عنوان مثال: p {border-color: red green blue yellow} - لبه بالا قرمز، لبه راست سبز، لبه پایین آبی و لبه چپ زرد است

لطفاً به

آموزش CSS:پهلوهای CSS

دستورالعمل CSS:ویژگی border-color

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

مثال

مثال 1

رنگ لبه‌های چهارگانه <div> به قرمز تغییر می‌یابد:

document.getElementById("myDiv").style.borderColor = "red";

آزمایش کنید

مثال 2

رنگ لبه‌های افقی <div> به سبز و رنگ لبه‌های عمودی به بنفش تغییر می‌یابد:

document.getElementById("myDiv").style.borderColor = "green purple";

آزمایش کنید

مثال 3

رنگ لبه <div> بازگردانی شود:

alert(document.getElementById("myDiv").style.borderColor);

آزمایش کنید

نحوه نوشتن

ویژگی borderColor بازگردانی شود:

عنصر.style.borderColor

ویژگی borderColor تنظیم شود:

عنصر.style.borderColor = "رنگ|شفاف|initial|inherit"

مقدار ویژگی

مقدار توضیح
رنگ

رنگ لبه‌ها را مشخص می‌کند. رنگ پیش‌فرض سیاه است.

لطفاً ببینید مقادیر رنگ CSS، لیست کامل‌تر از مقادیر ممکنه را ببینید.
شفاف رنگ لبه‌ها شفاف است (محتوای زیرین قابل مشاهده است).
initial این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. لطفاً به initial.
inherit این ویژگی را از عنصر والد خود ارث می‌برد. لطفاً به inherit.

جزئیات فنی

مقدار پیش‌فرض: سیاه
مقدار بازگشتی: رشته‌ای که رنگ لبه‌های عنصر را نشان می‌دهد.
نسخه CSS: CSS1

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

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

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