Belajar CSS : CSS Borders ~ Dian Putriana

Jumat, 06 Januari 2017

10.00

By Unknown

Belajar CSS : CSS Borders

Halo teman-teman sekalian, apa kabar semua ?? Nah pada kesempatan kali ini saya akan memposting tentang CSS Borders. Berikut materinya

CSS Border

Properti CSS Border memungkinkan anda untuk menentukan gaya, lebar, warna pembatas pada elemen.

Templat yang digunakan didalam inline styles, yaitu dimasukan kedalam atribut style="..........". Fitur CSS yang ada dalam templat ini adalah :

Border-width, properti yang digunakan untuk menetukan lebar empat pembatas (untuk pembatas atas, kanan, bawah dan pembatas kiri). Lebar dapat diatur sebagai ukuran tertentu yaitu dalam px, pt, cm, em dll. dengan menggunakan salah satu dari tiga nilai yang telah ditentukan: tipis, sedang atau tebal.

Contoh script

Hasil dari script yang diatas

Catatan : properti border-width tidak bekerja jika digunakan sendiri. Selalu menentukan properti border-style untuk mengatur perbatasan pertama.

Border-style, properti yang digunakan untuk menentukan jenis/gaya pembatasan apa yang akan digunakan

Contoh :

Hasilnya :

Keterangan :

dotted, mendefinisikan perbatasan bertitik.
dashed, perbatasan putus-putus.
solid, sebuah perbatasan yang solid.
double, perbatasan ganda.
groove, sebuah perbatasan berlekuk 3D. Efeknya tergantung pada nilai border-color.
ridge, sebuah perbatasan bergerigi 3D. Efeknya tergantung pada nilai border-color.
insert, sebuah perbatasan insert 3D. Efeknya tergantung pada nilai border-color.
outset, sebuah perbatasan awal 3D. Efeknya tergantung pada nilai border-color.
none, ada batas.
hidden, perbatasan bersembunyi.

Border-color, properti yang digunakan untuk mengatur warna dari empat pembatas (pembatas atas, kanan, bawah dan pembatas kiri). Warna dapat diatur dengan : nama warna, hex, dan rgb.

Contoh :