outline-width

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

مقدار این عنصر می تواند یک عدد با واحد طولی باشد یا اینکه یکی از کلمات کلیدی medium، thin و thick باشد. که این کلمات به ترتیب به معنی نازک، معمولی و ضخیم می باشند.

outline-width: 2px;
outline-width: 0.2em;
outline-width: thin;

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

.baba {
  outline-width: 10px;
}

.gol-pesare-baba {
  outline-width: inherit; /* 10px */
}

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

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

input[type="text"]:focus {
  outline-width: 2px;
  outline-style: solid;
  outline-color: purple;
}