CSS

Outline di CSS: Code dan Cara Membuatnya

Outline CSS

Outline adalah garis yang digambar di sekitar elemen, DI LUAR border untuk membuat elemen “menonjol”.

CSS memiliki properti outline sebagai berikut:

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

Catatan: Outline berbeda dengan border! Tidak seperti border, kerangka digambar di luar batas elemen dan mungkin tumpang tindih dengan konten lainnya. Juga, outline BUKAN merupakan bagian dari dimensi elemen; lebar dan tinggi total elemen tidak dipengaruhi oleh lebar garis luar

Style Outline di CSS

Properti outline-style menentukan gaya outline dan memiliki salah satu nilai berikut:

dotted – Mendefinisikan garis putus-putus
dashed – Mendefinisikan garis putus-putus
solid – Mendefinisikan garis yang solid
double – Mendefinisikan garis ganda
groove – Mendefinisikan garis beralur 3D
ridge – Mendefinisikan garis bergerigi 3D
inset – Mendefinisikan garis inset 3D
outset– Mendefinisikan garis awal 3D
none – Tidak mendefinisikan garis besar
hidden – Mendefinisikan garis tersembunyi

Contoh berikut menunjukkan nilai outline-style yang berbeda:

Contoh
Demonstrasi outline style yang berbeda:

<!DOCTYPE html>
<html>
<head>
<style>
p {outline-color:red;}

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>
</head>
<body>

<h2>Properti outline style</h2>

<p class="dotted">A dotted outline</p>
<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class = "groove"> A groove outline. Efeknya bergantung pada nilai warna border. </p>
<p class = "ridge"> A ridge outline. Efeknya bergantung pada nilai warna border. </p>
<p class = "inset"> A inset outline. Efeknya bergantung pada nilai warna border. </p>
<p class = "outset"> A outset outlin. Efeknya bergantung pada nilai warna border. </p>

</body>
</html>

Catatan: Tak satu pun dari properti outline lainnya akan memiliki efek APA PUN kecuali properti outline-style disetel!


Hanifah Nurbaeti

Share
Tags: CSSoutline