आउटलाइन-स्टाइल गुण

outline-style गुण बाहरी रूपरेखा की शैली निर्धारित करता है - एक ऐसी सीमा जो कोई स्थान नहीं लेती।

सिंटैक्स

cssसिलेक्टर {
  outline-style: मान;
}

मान	विवरण
`solid`	ठोस रेखा।
`dotted`	बिंदुओं के रूप में रूपरेखा।
`dashed`	डैश के रूप में रूपरेखा।
`ridge`	उभरी हुई रेखा के रूप में रूपरेखा।
`double`	दोहरी रेखा के रूप में रूपरेखा। प्रभाव देखने के लिए सीमा की मोटाई कम से कम `3px` होनी चाहिए।
`groove`	अवतल रूपरेखा।
`inset`	धंसी हुई रूपरेखा।
`outset`	उभरी हुई रूपरेखा।
`none`	सीमा का अभाव।

डिफ़ॉल्ट मान: 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;
}

Результат: