CSS Outline

Sama seperti border, outline merupakan garis tepi sebuah element. Jika outline diterapkan bersamaan dengan border maka garis yang akan diluar adalah outline. Fungsinya sebagai menonjolkan sebuah element.

value dari property css outline sebagai berikut :

dotted - Mendefinisikan titik putus-putus

dashed - Mendefinisikan garis putus-putus

solid - Mendefinisikan garis besar yang solid (tidak terputus).

double - Mendefinisikan garis seperti solid (ganda).

groove - Mendefinisikan garis 3D beralur.

ridge - Mendefinisikan garis bergerigi 3D.

inset - Mendefinisikan garis sisipan 3D.

outset - Mendefinisikan outline awal 3D.

none - Tidak mendefinisikan garis tepi (tidak ada outline).

hidden - Mendefinisikan outline tersembunyi.

Property outline memiliki property yang berhubungan, sebagai berikut :

outline-style

outline-color

outline-width

outline-offset

outline

Langsung saja kita lihat contoh penerapannya :

<!DOCTYPE html>

<html>

<head>

</head>

.p-1{

outline-color: #4046bd;

outline-style: dotted;

outline-width: 3px;

padding: 8px;

}

.p-2{

outline-color: #4046bd;

outline-style: dashed;

outline-width: 3px;

padding: 8px;

}

.p-3{

outline-color: #4046bd;

outline-style: solid;

outline-width: 3px;

padding: 8px;

}

.p-4{

outline-color: #4046bd;

outline-style: double;

outline-width: 3px;

padding: 8px;

}

.p-5{

outline-color: #4046bd;

outline-style: groove;

outline-width: 3px;

padding: 8px;

}

.p-6{

outline-color: #4046bd;

outline-style: ridge;

outline-width: 3px;

padding: 8px;

}

.p-7{

outline-color: #4046bd;

outline-style: inset;

outline-width: 3px;

padding: 8px;

}

.p-8{

outline-color: #4046bd;

outline-style: outset;

outline-width: 3px;

padding: 8px;

}

.p-9{

outline-color: #4046bd;

outline-style: none;

outline-width: 3px;

padding: 8px;

}

.p-10{

outline-color: #4046bd;

outline-style: hidden;

outline-width: 3px;

padding: 8px;

}

</style>

<body>

<p class="p-1">Contoh penggunaan outline dotted</p>

<p class="p-2">Contoh penggunaan outline dashed</p>

<p class="p-3">Contoh penggunaan outline solid</p>

<p class="p-4">Contoh penggunaan outline double</p>

<p class="p-5">Contoh penggunaan outline groove</p>

<p class="p-6">Contoh penggunaan outline ridge</p>

<p class="p-7">Contoh penggunaan outline inset</p>

<p class="p-8">Contoh penggunaan outline outset</p>

<p class="p-9">Contoh penggunaan outline none</p>

<p class="p-10">Contoh penggunaan outline hidden</p>

</body>

</html>

Untuk hasilnya mungkin sekilas akan sama dengan border, namun ketika kita membuat sebuah website pasti akan menemukan sedikit perbedaan.

sekarang kita coba property outline offset :

<!DOCTYPE html>

<html>

<head>

margin: 30px;

background: yellow;

border: 1px solid #077834;

outline-style: solid;

outline-color: #4046bd;

outline-width: 5px;

outline-offset: 10px;

}

</style>

</head>

<body>

<p>Paragraf ini memiliki border 1px solid dan outline 5px solid dengan offset 10px</p>

</body>

</html>

Kita mengatur agar outline offset, maksudnya adalah dia menjauh dari element induk. Kita mengatur border agar terlihat elementnya.

Outine shorthand :

<!DOCTYPE html>

<html>

<head>

margin: 30px;

background: yellow;

border: 1px solid #077834;

outline: solid 5px #4046bd;

outline-offset: 10px;

}

</style>

</head>

<body>

<p>Paragraf ini memiliki border 1px solid dan outline 5px solid dengan offset 10px</p>

</body>

</html>

Untuk shorthand outline hanya bisa menampung tiga property yaitu lebar, warna, style outline.

Selamat mencoba...