outline-color

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

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

outline-color: red;
outline-color: #f00;
outline-color: hsla(0,0%,0%,0.5);

همینطور این ویژگی می تواند یک کلمه کلیدی به نام invert بپذیرد که فقط در اینترنت اکسپلورر 8 و مرورگرهای قدیمی پشتیبانی می شود. این مقدار باعث می شود تا رنگ متضاد رنگ پس زمینه به عنوان رنگ outline قرار بگیرد تا این خط واضح تر توسط کاربر مخصوصا کاربرانی که مشکلات بینایی دارند دیده شود.

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

.baba {
  outline-color: red;
}

.gol-pesare-baba {
  outline-color: inherit; /* red*/
}

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

دستور زیر باعث ایجاد یک خط بیروی برای عنصر input زمانی که در حالت focus قرار می گیرد، می شود.

input[type="text"]:focus {
  outline-width: 1px;
  outline-style: dotted;
  outline-color: yellow;
}