Hai teman-teman kembali lagi pada artikel saya , masih dengan tema materi yang sama yaitu tentang property pada css kali ini saya akan membahas tentang sebuah property untuk membuat garis tepi seperti border tetapi agak sedikit berbeda dengan border, yaitu property outline.
Hampir sama dengan border kegunaan property ini adalah untuk membuat garis tepi pada suatu element, Nah yang membedakan adalah pada outline garis terbentuk di sekeliling element dan kita tidak bisa m,emberi rounded pada bagian ujungnya dan kita tidak bisa memberikan garis terhadap sisi tertentu.
Oke saya akan mendemokan bagaimana outline bekerja:
silahkan salin code berikut :
HTML
<article> <input type="text" name="" > </article>
CSS
input[type="text"]:hover {
outline-width: 2px;
outline-style: solid;
outline-color: purple;
}
Jika kalian salin code di atas dan kalian jalankan pada browser masing-masing, maka hasilnya akan tampil garis berwarna ungu pada elemen input saat kalian arahkan cursornya,, karena saya memakai hover untuk menampilkan garisnya.
Oke itu saja pengenalan property outline padaq CSS kali ini sampai bertemu pada artikel selanjutnya.
Terimakasih.