Xüsusiyyət outline-style

Xüsusiyyət outline-style xarici çərçivənin - yer tutmayan sərhədin stilini təyin edir.

Sintaksis

cssselektor {
  outline-style: qiymet;
}

Qiymet	Təsvir
`solid`	Davamlı xətt.
`dotted`	Nöqteler şəklində çərçivə.
`dashed`	Tire şəklində çərçivə.
`ridge`	Qabarıq xətt şəklində çərçivə.
`double`	İkiqat xətt şəklində çərçivə. Effekti görmək üçün çərçivənin qalınlığı ən azı `3px` olmalıdır.
`groove`	Oyuq çərçivə.
`inset`	Batmış çərçivə.
`outset`	Qabarıq çərçivə.
`none`	Çərçivənin olmaması.

Standart qiymet: none.

html<div id="elem"></div>

css#elem {
  outline-width: 1px;
  outline-style: solid;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

html<div id="elem"></div>

css#elem {
  outline-width: 1px;
  outline-style: dotted;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

html<div id="elem"></div>

css#elem {
  outline-width: 1px;
  outline-style: dashed;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

html<div id="elem"></div>

css#elem {
  outline-width: 3px;
  outline-style: ridge;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

html<div id="elem"></div>

css#elem {
  outline-width: 3px;
  outline-style: double;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

html<div id="elem"></div>

css#elem {
  outline-width: 3px;
  outline-style: groove;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

html<div id="elem"></div>

css#elem {
  outline-width: 3px;
  outline-style: inset;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

html<div id="elem"></div>

css#elem {
  outline-width: 3px;
  outline-style: outset;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат: