CSS Outline

Mengatur garis luar (outline) elemen.

Outline adalah garis (jalur) yang mengelilingi dan berada diluar garis batas (border) elemen.
Pengaturan Outline sama dengan Pengaturan border. Outline BUKAN bagian dari nilai ukuran (dimensi) elemen.
Outline TIDAK terpengaruh oleh nilai ukuran (dimensi) elemen.
Outline dapat "melanggar" (tumpang-tindih dengan) elemen lain yang berada dalam jangkauannya.

outline

border

elemen

Property outline

border-width, border-style, border-color

Contoh outline

Perhatikan hasil dari contoh kode dibawah ini, outline dapat melanggar garis batas (border) elemen lain.

<p>Paragraf</p>

<style>
p {
  padding:10px;
  border:2px solid #555;
  outline: 10px dashed red;
  }
</style>

Paragraf

<p>Paragraf</p>

<style>
p {
  padding:10px;
  border:2px solid #555;
  outline: 2px solid red;
  outline-offset:20px;
  }
</style>

Paragraf

Mengatur gaya (style) outline

<p class="dotted">Elemen dengan outline dotted.</p>
<p class="dashed">Elemen dengan outline dashed.</p>
<p class="solid">Elemen dengan outline solid.</p>
<p class="double">Elemen dengan outline double.</p>
<p class="groove">Elemen dengan outline groove.</p>
<p class="ridge">Elemen dengan outline ridge.</p>
<p class="inset">Elemen dengan outline inset.</p>
<p class="outset">Elemen dengan outline outset.</p>

<style>
p {
  outline-width: 6px;
  outline-color: lightgreen;
}
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
</style>

Elemen dengan outline dotted.

Elemen dengan outline dashed.

Elemen dengan outline solid.

Elemen dengan outline double.

Elemen dengan outline groove.

Elemen dengan outline ridge.

Elemen dengan outline inset.

Elemen dengan outline outset.