⌘K

Vlastnosť outline-style

Vlastnosť outline-style nastavuje štýl vonkajšieho rámu - hranice, ktorá nezaberá miesto.

Syntax

cssselektor {
  outline-style: hodnota;
}

Hodnoty

Hodnota Popis
solid Plná čiara.
dotted Rám v podobe bodiek.
dashed Rám v podobe čiarky.
ridge Rám v podobe vypuklej čiary.
double Rám v podobe dvojitej čiary. Aby bol efekt viditeľný, hrúbka hranice musí byť aspoň 3px.
groove Vpustený rám.
inset Zapuštený rám.
outset Vystupujúci rám.
none Žiadna hranica.

Predvolená hodnota: none.

Príklad . Hodnota solid

html<div id="elem"></div>
css#elem {
  outline-width: 1px;
  outline-style: solid;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Príklad . Hodnota dotted

html<div id="elem"></div>
css#elem {
  outline-width: 1px;
  outline-style: dotted;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Príklad . Hodnota dashed

html<div id="elem"></div>
css#elem {
  outline-width: 1px;
  outline-style: dashed;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Príklad . Hodnota ridge

html<div id="elem"></div>
css#elem {
  outline-width: 3px;
  outline-style: ridge;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Príklad . Hodnota double

html<div id="elem"></div>
css#elem {
  outline-width: 3px;
  outline-style: double;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Príklad . Hodnota groove

html<div id="elem"></div>
css#elem {
  outline-width: 3px;
  outline-style: groove;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Príklad . Hodnota inset

html<div id="elem"></div>
css#elem {
  outline-width: 3px;
  outline-style: inset;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Príklad . Hodnota outset

html<div id="elem"></div>
css#elem {
  outline-width: 3px;
  outline-style: outset;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Pozri tiež

BackVlastnosť outline-widthNextVlastnosť outline-color